예를 들어, 하나의 UL에는 10 LI가 있으며 세 번째 Li에는 특별한 스타일이 있습니다 (예 : 색상은 빨간색이고 다른 색은 검은 색입니다). 빨간색 Lis를 포함하지 않은 다른 모든 LI의 색상을 빨간색으로 설정하고 싶습니다. 현재 Red Lis의 모든 형제 노드를 얻어야합니다.
형제는 당신과 같은 사람들이며, 이전이나 다음에도, 당신보다 나이가 많거나 당신보다 나이가있을 수 있습니다. 마찬가지로 형제 노드가 사용됩니다. 형제 노드를 얻는 일반적인 방법은 다음과 같습니다.
코드는 다음과 같습니다
기능 형제 (elm) {var a = []; var p = elm.parentnode.children; for (var i = 0, pl = p.length; i <pl; i ++) {if (p [i]! == elm) a.push (p [i]);} return a;}아이디어 : 먼저이 요소의 부모 노드의 모든 자녀를 얻으십시오. 모든 어린이 도이 요소 자체를 포함하기 때문에 결과에서 자신을 제거해야합니다.
이상하게 보이는 또 다른 방법이 있습니다. 이것은 jQuery에서 형제 노드의 소스 코드를 얻는 것입니다.
코드는 다음과 같습니다
함수 형제 (elem) {var r = []; var n = elem.parentnode.firstchild; for (; n; n = n.nextsibling) {if (n.nodetype === 1 && n! == elem) {r.push (n);}} return r;}아이디어 : 먼저이 요소의 상위 노드의 첫 번째 자식 노드를 찾은 다음 루프로 검색이 완료 될 때 까지이 노드의 다음 형제 노드를 찾으십시오.
jQuery가 왜이 방법을 사용하는지 궁금합니다. 이 메소드가 첫 번째 방법보다 더 효율적입니까?
예비 시험 (1,500 개 이상의 LI) 후, 위의 두 가지 방법은 효율에 거의 차이가 없으며 둘 다 몇 밀리 초 이내에 성공합니다. 테스트 환경은 Chrome과 Firefox입니다.
모든 형제 노드를 얻을 필요가있는 경우 위의 방법 중 하나를 사용할 수 있습니다.
물론 앞으로 위의 두 가지 방법을 확인할 것입니다. 차이가 있으면 업데이트하겠습니다.
JQuery의 부모, 아들 및 형제 노드 검색 방법
jquery.parent (expr) 부모 노드를 찾으십시오. $ ( "span"). parent () 또는 $ ( "span"). parent ( ". class")와 같은 필터링을 위해 Expr을 전달할 수 있습니다.
jquery.parents (expr), jQuery.parents (expr)와 유사하지만 모든 조상 요소를 검색하며 부모 요소에만 국한되지 않습니다.
jQuery.children (expr). 모든 자식 노드를 반환합니다. 이 방법은 직접 자식 노드 만 반환하며 모든 자식 노드를 반환하지 않습니다.
jQuery.contents ()는 노드 및 텍스트를 포함한 다음 내용을 모두 반환합니다. 이 방법과 Children ()의 차이점은 빈 텍스트를 포함하여
jQuery Object Returns, Children ()은 노드 만 반환합니다
jQuery.prev ()는 모든 형제 노드가 아니라 이전 형제 노드를 반환합니다.
jQuery.prevall (), 이전 형제 노드를 반환하십시오
jQuery.next ()는 모든 형제 노드가 아니라 다음 형제 노드를 반환합니다.
jquery.nextall (), 모든 후속 형제 노드를 반환하십시오
jquery.siblings ()는 앞면과 뒷면에 관계없이 형제 노드를 반환합니다.
jquery.find (expr)는 jquery.filter (expr)와 완전히 다릅니다. jQuery.filter ()는 초기 jQuery 객체 컬렉션의 일부를 필터링하고 jQuery.find ()
반환 결과는 $ ( "p"), find ( "span")와 같은 초기 컬렉션에 내용이 없습니다. <p> 요소에서 <p> 요소에서 <Span>을 찾기 시작합니다.
위의 기사 js는 모든 형제 요소 노드를 얻는 것은 내가 당신과 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.