라이브러리가없는 JavaScript에서 형제를 가져옴

Question

JavaScript를 사용하여 형제를 "위로"볼 수 있습니까? 기본적으로 jquery에있는 것과 비슷한 함수 prevUntil()이 필요합니다.

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 

나는 클릭 된 요소에서 시작하고, 클래스와 일치하는 때까지 형제 트리를 내 방식을 작업 할 :

나는 같은 동일한 수준에 <div> 요소 모두를 많이 가지고 이름 기준에 도달하면 중지하십시오.

어떻게하면됩니까?

Answer 1

이 답변은 비슷한 질문에 대한 대답으로 이전에 출판되었습니다. here

몇 가지 방법이 있습니다.

다음 중 하나가 트릭을 수행해야합니다.

// METHOD A (ARRAY.FILTER, STRING.INDEXOF) 
var siblings = function(node, children) { 
    siblingList = children.filter(function(val) { 
     return [node].indexOf(val) != -1; 
    }); 
    return siblingList; 
} 

// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.PUSH) 
var siblings = function(node, children) { 
    var siblingList = []; 
    for (var n = children.length - 1; n >= 0; n--) { 
     if (children[n] != node) { 
      siblingList.push(children[n]); 
     } 
    } 
    return siblingList; 
} 

// METHOD C (STRING.INDEXOF, ARRAY.SPLICE) 
var siblings = function(node, children) { 
    siblingList = children; 
    index = siblingList.indexOf(node); 
    if(index != -1) { 
     siblingList.splice(index, 1); 
    } 
    return siblingList; 
} 

는 참고 : JQuery와 코드베이스는 A 급 자바 스크립트를 관찰을위한 훌륭한 자원이다.

다음은 jQuery 코드 기반을 매우 간소화 된 방식으로 보여주는 탁월한 도구입니다. http://james.padolsey.com/jquery/

Answer 2

다음은 HTML DOM

에서 previousSibling은 속성이있다는

http://reference.sitepoint.com/javascript/Node/previousSibling

Answer 3

그냥 how jQuery does it 살펴보고 몇 가지 참조입니다.

prevUntil: function(elem, i, until) { 
    return jQuery.dir(elem, "previousSibling", until); 
}, 

while/looping 함수 caled dir()을 사용합니다. prevUntil은 previousSibling이 until 요소와 동일 할 때까지 계속됩니다.

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[ dir ]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
}, 

Answer 4

.parentNode과 조합하여 .children을 사용하십시오. 그런 다음 NodeList을 배열로 변환 한 후 필터링합니다 (http://jsfiddle.net/pimvdb/DYSAm/).

var div = document.getElementsByTagName('div')[0]; 
var siblings = [].slice.call(div.parentNode.children) // convert to array 
       .filter(function(v) { return v !== div }); // remove element itself 
console.log(siblings); 

Answer 5

Example 사용 previousSibling은 :

var className = "needle"; 
    var element = clickedElement; 
    while(element.previousSibling && element.previousSibling.className != className) { 
     element = element.previousSibling; 
    } 
    element.previousSibling; // the element or null 

Answer 6

이 방법에 대해 :

while (node = node.previousElementSibling) { 
    if ((' ' + node.className + ' ').indexOf('foo') !== -1) { 
     // found; do your thing 
     break; 
    } 
} 

이가 IE8에서 작동하지 않는다는 것을 말해 귀찮게하지 마십시오 ...

Answer 7

기본적으로 배열을 반환하는 getElementsByTagName 및 getElementsByName이 있습니다. 와일드 카드를 사용할 수 있습니다. prevUntil을 원한다면 라이브러리처럼 이미 존재하는 것을 사용하거나 함수를 만들어야합니다.

function getElements() 
    { 
    var x=document.getElementsByName("*"); 
    alert(x.length); 
    } 

갱신

에서 getElementById는 하나의 요소를 반환합니다.