hermano - nodos javascript

¿Hay alguna manera de seleccionar los nodos hermanos?

Question

Por algunos motivos 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 seleccioné el nodo inner1, ¿hay alguna manera de acceder a sus hermanos, inner2-4 nodes?

Answer 1

¿Has revisado 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;
    }

n.nodeType == 1 comprueba si el elemento es un nodo html y n! == excluye el elemento actual.

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

Answer 2

Así es como puedes obtener el anterior, el 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 3

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

 node.parentNode.childNodes[]

o ... usando jQuery:

$(''#innerId'').siblings()

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

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 4

Desde 2017:
respuesta directa: element.nextElementSibling para obtener el hermano del elemento correcto. también tienes element.previousElementSibling para el anterior

a partir de aquí es bastante simple para obtener todo el próximo sibiling

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

Answer 5

Rápido:

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

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

Obtenga los hijos de los padres como una matriz, filtre este elemento.

Editar:

Y para filtrar los nodos de texto (Gracias pmrotule ):

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

Answer 6

Use document.querySelectorAll() y Loops e iteración

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 7

Hay algunas maneras 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 de jQuery es un gran recurso para observar el Javascript de grado A.

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

Answer 8

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

Answer 9

var sibling = node.nextSibling;

Esto devolverá al hermano inmediatamente después de él o null no habrá más hermanos disponibles. Del mismo modo, puede usar previousSibling .

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

var sibling = node.nextElementSibling;

También existe unElementSibling previousElementSibling .

Answer 10

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