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

Vì một số lý do về hiệu suất, tôi đang cố gắng tìm cách chỉ chọn các nút anh 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 các inner2-4nút anh chị em của nó không?

Vâng ... chắc chắn ... chỉ cần truy cập cha mẹ và sau đó là con cái.

 node.parentNode.childNodes[]

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

$('#innerId').siblings()

Chỉnh sửa: Cletus luôn là nguồn cảm hứng. Tôi đã đào sâu hơn. Đây là cách jQuery nhận được anh chị em về cơ bản:

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

var sibling = node.nextSibling;

Điều này sẽ trả lại anh chị em ngay sau nó, hoặc vô hiệu hóa không còn anh chị em nào nữa. Tương tự như vậy, 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 divthẻ tiếp theo , mà là khoảng trắng sau nút. Có vẻ tốt hơn là

var sibling = node.nextElementSibling;

Cũng tồn tại a previousElementSibling.

Nhanh chóng:

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

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

Lấy con của cha mẹ dưới dạng một mảng, lọc bỏ phần tử này.

Biên tập:

Và để lọc ra các nút văn bản (Cảm ơn pmrotule ):

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

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

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

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

bạn đã kiểm tra phương thức "Sibling" 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ử có phải là nút html hay không và n! == loại trừ 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à javascript vani.

Có một số cách để làm điều đó.

Một trong những cách sau sẽ 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ơ sở mã jQuery là một nguồn tài nguyên tuyệt vời để quan sát Javascript Hạng A.

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

Đây là cách bạn có thể nhận được trước, sau 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);
}

Sử dụng document.querySelectorAll () và Loops và phép lặp

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>

jQuery

$el.siblings();

Gốc - mới nhất, Edge13 +

[...el.parentNode.children].filter((child) =>
  child !== el
);

Gốc (thay thế) - mới nhất, Edge13 +

Array.from(el.parentNode.children).filter((child) =>
  child !== el
);

Bản địa - IE10 +

Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

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

1) Thêm lớp đã chọn vào phần tử đích
2) Tìm tất cả các phần tử con của phần tử mẹ trừ phần tử đích
3) Xóa lớp khỏi phần tử đích

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



function getSiblings(target) {
    target.classList.add('selected');
    let siblings = document.querySelecttorAll('#outer .item:not(.currentlySelected)')
    target.classList.remove('selected'); 
return siblings
    }

Hàm sau sẽ trả về một mảng chứa tất cả các anh chị em của phần tử đã cho.

function getSiblings(elem) {
    return [...elem.parentNode.children].filter(item => item !== elem);
}

Chỉ cần truyền phần tử đã chọn vào getSiblings()hàm vì nó là tham số duy nhất.

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