Apakah ada cara untuk memilih node saudara?

Untuk beberapa alasan kinerja, saya mencoba menemukan cara untuk memilih hanya simpul saudara dari simpul yang dipilih.

Sebagai contoh,

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

Jika saya memilih node inner1, apakah ada cara bagi saya untuk mengakses saudara kandungnya, inner2-4node?

Baiklah ... tentu ... akses saja orang tua dan kemudian anak-anak.

 node.parentNode.childNodes[]

atau ... menggunakan jQuery:

$('#innerId').siblings()

Sunting: Cletus seperti biasa menginspirasi. Saya menggali lebih jauh. Inilah cara jQuery mendapatkan saudara pada dasarnya:

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;

Ini akan mengembalikan saudara segera setelahnya, atau null tidak ada saudara lagi yang tersedia. Demikian juga, Anda bisa menggunakan previousSibling.

[Sunting] Setelah dipikir-pikir, ini tidak akan memberikan divtag berikutnya , tetapi spasi setelah node. Sepertinya lebih baik

var sibling = node.nextElementSibling;

Ada juga ada previousElementSibling .

Cepat:

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

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

Dapatkan turunan orang tua sebagai array, filter elemen ini.

Edit:

Dan untuk menyaring node teks (Terima kasih pmrotule ):

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

Dari 2017:
jawaban langsung: element.nextElementSiblinguntuk mendapatkan saudara elemen yang tepat. juga Anda miliki element.previousElementSiblinguntuk yang sebelumnya

dari sini cukup mudah untuk mendapatkan semua saudara kandung berikutnya

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

sudahkah Anda memeriksa metode "Sibling" di jQuery?

    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 periksa apakah elemennya adalah node html dan n! == mengecualikan elemen saat ini.

Saya pikir Anda dapat menggunakan fungsi yang sama, semua kode itu tampaknya javascript vanilla.

Ada beberapa cara untuk melakukannya.

Salah satu dari yang berikut ini seharusnya berhasil.

// 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: Basis kode jQuery adalah sumber daya yang bagus untuk mengamati JavaScript Tingkat A.

Berikut adalah alat luar biasa yang mengungkapkan basis kode jQuery dengan cara yang sangat efisien. http://james.padolsey.com/jquery/

Inilah cara Anda mendapatkan saudara sebelumnya, berikutnya, dan semua (kedua sisi):

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

Gunakan document.querySelectorAll () dan Loop dan iterasi

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

Asli - terbaru, Edge13 +

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

Asli (alternatif) - terbaru, Edge13 +

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

Asli - IE10 +

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

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

1) Tambahkan kelas yang dipilih ke elemen target
2) Temukan semua turunan dari elemen induk tidak termasuk elemen target
3) Hapus kelas dari elemen target

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

Fungsi berikut akan mengembalikan larik yang berisi semua saudara kandung dari elemen yang diberikan.

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

Cukup berikan elemen yang dipilih ke dalam getSiblings()fungsi sebagai satu-satunya parameter.

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