Existe-t-il un moyen de sélectionner des nœuds frères et soeurs?

Eh bien … sûr … n'hésitez pas à accéder aux parents et ensuite aux enfants.

  node.parentNode.childNodes[] 

Ou … en utilisant jQuery:

 $('#innerId').siblings() 

Edit: Cletus comme toujours inspirant. J'ai creusé plus loin. C'est ainsi que jQuery obtient les frères et sœurs essentiellement:

 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; 

Cela renverra la fratrie immédiatement après, ou nulle plus de frères et soeurs seront disponibles. De même, vous pouvez utiliser previousSibling .

[Edit] À la réflexion, cela ne donnera pas la prochaine balise div , mais l'espace blanc après le nœud. Mieux semble être

 var sibling = node.nextElementSibling; 

Il existe également un previousElementSibling .

Il existe quelques façons de le faire.

Soit l'un des éléments suivants devrait faire l'affaire.

 // 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: La base de code jQuery est une excellente ressource pour observer le Javascript de la catégorie A.

Voici un excellent outil qui révèle la base de code jQuery d'une manière très simplifiée. http://james.padolsey.com/jquery/

Avez-vous vérifié la méthode "Sibling" dans jQuery?

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

Le n.nodeType == 1 vérifie si l'élément est un nœud html et n! == exclue l'élément actuel.

Je pense que vous pouvez utiliser la même fonction, tout ce code semble être vanilla javascript.

Rapide:

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

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

Obtenez les enfants des parents en tant que tableau, filtrez cet élément.

Utilisez document.querySelectorAll () et 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> 

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

Voici comment vous pouvez obtenir les précédents, les prochains et tous les frères et sœurs (les deux côtés):

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

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