Obtener hermanos en JavaScript, sin bibliotecas

Question

¿Cómo puedo buscar hermanos "hacia arriba" usando JavaScript? Básicamente, necesito una función prevUntil() similar a la presente en jQuery.

Tengo un montón de <div> elementos, todos en el mismo nivel, tales como:

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 

quiero empezar en un elemento de clic, y trabajar mi camino hasta el árbol hermanos hasta que uno que coincide con una clase se alcanza el criterio de nombre, luego se detiene.

¿Cómo puedo hacer esto, por favor?

Answer 1

Esta respuesta ha sido publicada previamente here en respuesta a una pregunta similar.

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 2

Hay una propiedad previousSibling en el DOM HTML

Aquí es alguna referencia

http://reference.sitepoint.com/javascript/Node/previousSibling

Answer 3

Basta con echar un vistazo a how jQuery does it.

prevUntil: function(elem, i, until) { 
    return jQuery.dir(elem, "previousSibling", until); 
}, 

Que usa una función while/looping caled dir(). El previoHasta que continúa hasta que previousSibling sea el mismo que el elemento until.

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[ dir ]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
}, 

Answer 4

uso en combinación con .children.parentNode. Luego filtre el NodeList, luego de convertirlo en una matriz: http://jsfiddle.net/pimvdb/DYSAm/.

var div = document.getElementsByTagName('div')[0]; 
var siblings = [].slice.call(div.parentNode.children) // convert to array 
       .filter(function(v) { return v !== div }); // remove element itself 
console.log(siblings); 

Answer 5

Example Usando previousSibling:

var className = "needle"; 
    var element = clickedElement; 
    while(element.previousSibling && element.previousSibling.className != className) { 
     element = element.previousSibling; 
    } 
    element.previousSibling; // the element or null 

Answer 6

¿Qué tal esto:

while (node = node.previousElementSibling) { 
    if ((' ' + node.className + ' ').indexOf('foo') !== -1) { 
     // found; do your thing 
     break; 
    } 
} 

No se moleste que me dice que esto no funciona en IE8 ...

Answer 7

Básicamente tienes getlementsByTagName y getElementsByName devuelven matrices y puede usar comodines. Si quieres previenen hasta que necesites hacer una función o utilizas algo que ya existe como una biblioteca.

function getElements() 
    { 
    var x=document.getElementsByName("*"); 
    alert(x.length); 
    } 

actualización

GetElementByID devuelve sólo un elemento.