Có cách nào để chọn các nút anh chị em không?

Question

Vì một số lý do hiệu suất, tôi đang cố gắng tìm cách chỉ chọn các nút anh chị em của nút đã chọn. Ví dụ:

<div id="outer"> 
     <div id="inner1"> </div> 
     <div id="inner2"> </div> 
     <div id="inner3"> </div> 
     <div id="inner4"> </div> 
</div> 

Nếu tôi chọn nút inner1, có cách nào để tôi truy cập vào anh chị em của nó, nút inner2-4 không?

Answer 1

Vâng ... chắc chắn ... chỉ cần truy cập vào phụ huynh và sau đó là trẻ em.

node.parentNode.childNodes[] 

hoặc ... sử dụng jQuery:

$('#innerId').siblings() 

Edit: Cletus như mọi khi được truyền cảm hứng. Tôi đào sâu hơn. Đây là cách jQuery được anh chị em chủ yếu:

function getChildren(n, skipMe){ 
    var r = []; 
    for (; n; n = n.nextSibling) 
     if (n.nodeType == 1 && n != skipMe) 
      r.push(n);   
    return r; 
}; 

function getSiblings(n) { 
    return getChildren(n.parentNode.firstChild, n); 
} 

Answer 2

var childNodeArray = document.getElementById('somethingOtherThanid').childNodes; 

Answer 3

var sibling = node.nextSibling; 

này sẽ trở lại với anh chị em ngay lập tức sau khi nó, hoặc null không anh chị em đều có sẵn. Tương tự, bạn có thể sử dụng previousSibling.

[Chỉnh sửa] Suy nghĩ thứ hai, điều này sẽ không cung cấp thẻ tiếp theo div, nhưng khoảng trắng sau nút. Tốt hơn có vẻ là

var sibling = node.nextElementSibling; 

Cũng tồn tại một previousElementSibling.

Answer 4

bạn đã kiểm tra phương thức "Anh chị em" trong jQuery chưa?

sibling: function(n, elem) { 
     var r = []; 

     for (; n; n = n.nextSibling) { 
      if (n.nodeType === 1 && n !== elem) { 
       r.push(n); 
      } 
     } 

     return r; 
    } 

n.nodeType == 1 kiểm tra xem phần tử là nút html và n! == không bao gồm phần tử hiện tại.

Tôi nghĩ bạn có thể sử dụng cùng một chức năng, tất cả mã đó dường như là vani javascript.

Answer 5

Có một số cách để thực hiện.

Hoặc một trong những điều sau đây nên thực hiện thủ thuật.

// 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; 
} 

FYI: Các jQuery mã cơ bản là một nguồn lực lớn để quan sát Hạng A Javascript.

Đây là một công cụ tuyệt vời cho thấy mã cơ sở jQuery theo cách rất hợp lý. http://james.padolsey.com/jquery/

Answer 6

x1 = document.getElementById('outer')[0] 
     .getElementsByTagName('ul')[1] 
     .getElementsByTagName('li')[2]; 
x1.setAttribute("id", "buyOnlineLocationFix"); 

Answer 7

Sử dụng document.querySelectorAll() và Loops and iteration

function sibblingOf(children,targetChild){ 
 
    var children = document.querySelectorAll(children); 
 
    for(var i=0; i< children.length; i++){ 
 
    children[i].addEventListener("click", function(){ 
 
     for(var y=0; y<children.length;y++){children[y].classList.remove("target")} 
 
     this.classList.add("target") 
 
    }, false) 
 
    } 
 
} 
 

 
sibblingOf("#outer >div","#inner2");

#outer >div:not(.target){color:red}

<div id="outer"> 
 
     <div id="inner1">Div 1 </div> 
 
     <div id="inner2">Div 2 </div> 
 
     <div id="inner3">Div 3 </div> 
 
     <div id="inner4">Div 4 </div> 
 
</div>

Answer 8

Đây là cách bạn có thể nhận được trước đó, bên cạnh và tất cả anh chị em (cả hai bên):

function prevSiblings(target) { 
    var siblings = [], n = target; 
    while(n = n.previousElementSibling) siblings.push(n); 
    return siblings; 
} 

function nextSiblings(target) { 
    var siblings = [], n = target; 
    while(n = n.nextElementSibling) siblings.push(n); 
    return siblings; 
} 

function siblings(target) { 
    var prev = prevSiblings(target) || [], 
     next = nexSiblings(target) || []; 
    return prev.concat(next); 
} 

Answer 9

nhanh:

var siblings = n => [...n.parentElement.children].filter(c=>c!=n) 

https://codepen.io/anon/pen/LLoyrP?editors=1011

Nhận con của cha mẹ như một mảng, lọc ra các yếu tố này.

Answer 10

Từ năm 2017:
câu trả lời đơn giản: element.nextElementSibling để có được anh chị em phần tử phù hợp. bạn cũng có element.previousElementSibling cho trước một

từ ở đây là khá đơn giản để có tất cả sibiling tiếp theo

var n = element, ret = []; 
while (n = n.nextElementSibling){ 
    ret.push(n) 
} 
return ret;