在没有库的情况下获取JavaScript中的兄弟姐妹

Question

如何使用JavaScript"向上"寻找兄弟姐妹？基本上,我需要一个prevUntil()类似于jQuery中的函数的函数.

我有很多<div>元素,都在同一级别,例如:

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

我想从一个单击的元素开始,然后沿着兄弟树继续工作,直到找到符合类名标准的元素,然后停止.

我该怎么办呢？

Answer 1

这个答案之前发表在这里是为了回答类似的问题.

有几种方法可以做到这一点.

以下任何一种都应该做到这一点.

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

仅供参考:jQuery代码库是观察A级Javascript的绝佳资源.

这是一个出色的工具,以非常简化的方式显示jQuery代码库. http://james.padolsey.com/jquery/

Answer 2

示例 使用previousSibling:

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

Answer 3

使用.children与组合.parentNode.然后NodeList在将其转换为数组后对其进行过滤: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);