¿Hay alguna manera de seleccionar los nodos hermanos?

Question

Por algunas razones de rendimiento, estoy tratando de encontrar una manera de seleccionar solo los nodos hermanos del nodo seleccionado. Por ejemplo,

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

Si he seleccionado nodo inner1, ¿hay alguna manera de acceder a sus hermanos, los nodos inner2-4?

Answer 1

Bueno ... claro ... solo acceda al padre y luego a los niños.

node.parentNode.childNodes[] 

o ... usando jQuery:

$('#innerId').siblings() 

Editar: Cletus como siempre está inspirando. Cavé más. Así es como jQuery obtiene esencialmente hermanos:

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; 

Esto devolverá el hermano inmediatamente después de ella, o nulos no más hermanos están disponibles. Del mismo modo, puede usar previousSibling.

[Editar] Pensándolo bien, esto no dará la siguiente etiqueta div, pero los espacios en blanco después del nodo. Mejor parece ser

var sibling = node.nextElementSibling; 

También existe una previousElementSibling.

Answer 4

¿Has marcado el método "Hermanos" en jQuery?

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

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

     return r; 
    } 

la n.nodeType == 1 cheque si el elemento es un nodo html y n! == excluir el elemento actual.

Creo que puede usar la misma función, todo ese código parece ser vainilla javascript.

Answer 5

Hay algunas formas de hacerlo.

Cualquiera de los siguientes debe hacer el truco.

// 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 código jQuery es un gran recurso para la observación de grado A Javascript.

Aquí se encuentra una herramienta excelente que revela la base de código jQuery de una manera muy simplificada. http://james.padolsey.com/jquery/

Answer 6

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

Answer 7

Uso document.querySelectorAll() y 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

He aquí cómo usted podría conseguir anterior, siguiente y todos los hermanos (ambos lados):

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

rápida:

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

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

sacar a los niños de los padres como una matriz, el filtro cabo este elemento.

Answer 10

De 2017:
respuesta directa: element.nextElementSibling para obtener el hermano del elemento correcto. También tiene element.previousElementSibling anterior para

de aquí es bastante simple tiene todo junto sibiling

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