C'è un modo per selezionare i nodi di pari livello?

Per alcuni motivi di prestazioni, sto cercando di trovare un modo per selezionare solo i nodi di pari livello del nodo selezionato.

Per esempio,

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

Se ho selezionato il nodo inner1, c'è un modo per accedere ai suoi fratelli, inner2-4nodi?

Bene ... certo ... accedi al genitore e poi ai bambini.

 node.parentNode.childNodes[]

oppure ... usando jQuery:

$('#innerId').siblings()

Modifica: Cletus come sempre è stimolante. Ho scavato oltre. Ecco come jQuery ottiene essenzialmente i fratelli:

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;

Ciò restituirà il fratello immediatamente dopo di esso, oppure null non sono più disponibili fratelli. Allo stesso modo, puoi usare previousSibling.

[Modifica] A pensarci bene, questo non darà il divtag successivo , ma lo spazio dopo il nodo. Sembra che sia meglio

var sibling = node.nextElementSibling;

Esiste anche un file previousElementSibling.

Presto:

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

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

Ottieni i figli del genitore come un array, filtra questo elemento.

Modificare:

E per filtrare i nodi di testo (grazie pmrotule ):

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

Dal 2017:
risposta semplice: element.nextElementSiblingper ottenere il fratello dell'elemento giusto. anche tu hai element.previousElementSiblingper quello precedente

da qui è abbastanza semplice ottenere tutti i prossimi fratelli

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

hai controllato il metodo "Sibling" in jQuery?

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

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

        return r;
    }

il n.nodeType == 1 controlla se l'elemento è un nodo html e n! == esclude l'elemento corrente.

Penso che tu possa usare la stessa funzione, tutto quel codice sembra essere javascript vaniglia.

Ci sono alcuni modi per farlo.

Uno dei seguenti dovrebbe fare il trucco.

// 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 di codice jQuery è un'ottima risorsa per osservare Javascript di grado A.

Ecco uno strumento eccellente che rivela la base di codice jQuery in un modo molto semplificato. http://james.padolsey.com/jquery/

Ecco come puoi ottenere precedenti, successivi e tutti i fratelli (entrambi i lati):

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

Usa document.querySelectorAll () e Loops e iterazione

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

Nativo - ultimo, Edge13 +

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

Native (alternativa) - più recente, Edge13 +

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

Nativo - IE10 +

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

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

1) Aggiungi la classe selezionata all'elemento di destinazione
2) Trova tutti i figli dell'elemento padre escluso l'elemento di destinazione
3) Rimuovi la classe dall'elemento di destinazione

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

La funzione seguente restituirà un array contenente tutti i fratelli dell'elemento specificato.

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

Basta passare l'elemento selezionato nella getSiblings()funzione poiché è l'unico parametro.

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