Kardeş düğümleri seçmenin bir yolu var mı?


106

Bazı performans nedenlerinden dolayı, seçilen düğümün yalnızca kardeş düğümlerini seçmenin bir yolunu bulmaya çalışıyorum.

Örneğin,

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

İç1 düğümünü seçersem, kardeşlerine, inner2-4düğümlerine erişmemin bir yolu var mı?

Yanıtlar:


144

Pekala ... tabii ... sadece ebeveyne ve sonra çocuklara ulaşın.

 node.parentNode.childNodes[]

veya ... jQuery kullanarak:

$('#innerId').siblings()

Düzenleme: Cletus her zaman olduğu gibi ilham verici. Daha da kazdım. JQuery kardeşleri şu şekilde elde eder:

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

23
Jquery.siblings () öğesinin geçerli düğümü sonuç kümesinden hariç tuttuğunu unutmayın.
cletus

3
Bu çok güzel bir özellik!
cgp

1
Aslında jquery'deki node.parentNode.childNodes [] öğesinin eşdeğeri gerçekten $ (node) .parent (). Children () 'dır, $ (node) .siblings () değil. Güzel bir özellik olabilir ama aynı zamanda can sıkıcı da olabilir. Ne istediğine bağlı.
cletus

1
ELEMENT_NODE düğümlerini node.parentNode.childNodes ile kontrol etmek isteyeceksiniz, çünkü size beyaz boşluk metin düğümleri de verecektir.
seanmonstar

Hiçbir şey, sanırım bir
aptallıktı

102
var sibling = node.nextSibling;

Bu, kardeşi hemen arkasından döndürecektir veya başka hiçbir kardeş mevcut değildir. Aynı şekilde kullanabilirsiniz previousSibling.

[Düzenle] İkinci kez düşünüldüğünde, bu bir sonraki divetiketi değil, düğümden sonraki boşluğu verecektir . Daha iyi görünüyor

var sibling = node.nextElementSibling;

Ayrıca bir previousElementSibling.


1
next / previousElementSibling IE8'de desteklenmiyor
Vadim

1
IE9'dan başlayarak öyle. Ayrıca bkz. Stackoverflow.com/questions/5197825/…
parvus

14

Hızlı:

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

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

Üst öğenin alt öğelerini bir dizi olarak alın, bu öğeyi filtreleyin.

Düzenle:

Ve metin düğümlerini filtrelemek için (Teşekkürler pmrotule ):

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

2
Güzel çözüm. Yine de, metin düğümünü atmak için nodeType'ı kontrol ederdim[ ...n.parentNode.children ].filter(c => c.nodeType == 1 && c != n)
pmrotule

Bunu daktilo için nasıl değiştirirsiniz?
Nic Scozzaro

10

2017'den itibaren:
basit cevap: element.nextElementSiblingdoğru eleman kardeşi elde etmek için. bir element.previousElementSiblingöncekine de sahipsin

buradan sonraki kardeşlerin hepsini almak oldukça basit

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

Yalnızca nextveya değil, tüm kardeşleri döndürmelidir previous. Tam olarak geriye veya ileriye gitmeyi belirtmek bu durumda pek yardımcı olmuyor.
dvlden

4
neden olmasın. bir sonraki ve bir öncekini çekerseniz tüm resmi elde edebilirsiniz. bu yanıt, işleri yapmanın yeni bir yolunu göstermek için gelir. ve okuyuculara bir şeyler katın. sadece ebeveyn olmak ve her bir öğeyi gitmek ve herkesin yapabileceği mevcut öğeyi filtrelemek için
pery mimon

6

jQuery'de "Kardeş" yöntemini kontrol ettiniz mi?

    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 öğenin bir html düğümü olup olmadığını kontrol edin ve n! == geçerli öğeyi hariç tutun.

Aynı işlevi kullanabileceğinizi düşünüyorum, tüm bu kod vanilya javascript gibi görünüyor.


6

Bunu yapmanın birkaç yolu var.

Aşağıdakilerden herhangi biri hile yapmalıdır.

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

Bilginize: jQuery kod tabanı, A Sınıfı Javascript'i gözlemlemek için harika bir kaynaktır.

İşte jQuery kod tabanını çok basit bir şekilde ortaya çıkaran mükemmel bir araç. http://james.padolsey.com/jquery/


3

Önceki, sonraki ve tüm kardeşleri (her iki taraf) nasıl elde edeceğiniz aşağıda açıklanmıştır:

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

2

Kullanım document.querySelectorAll () ve Döngüler ve yineleme

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>


1

jQuery

$el.siblings();

Yerel - en son, Edge13 +

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

Yerel (alternatif) - en yeni, Edge13 +

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

Yerel - IE10 +

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


0

1) Seçilen sınıfı hedef öğeye ekleyin
2) Hedef öğe hariç üst öğenin tüm alt öğelerini bulun
3) Sınıfı hedef öğeden kaldırın

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

-1

Aşağıdaki fonksiyon, verilen elemanın tüm kardeşlerini içeren bir dizi döndürecektir.

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

Sadece seçilen öğeyi getSiblings()tek parametre olduğu için işleve aktarın.


-2
x1 = document.getElementById('outer')[0]
      .getElementsByTagName('ul')[1]
      .getElementsByTagName('li')[2];
x1.setAttribute("id", "buyOnlineLocationFix");
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.