饥人谷技术博客

利用原生JS获得一个元素的兄弟元素(翻译)

2019-05-25  本文已影响4人  MajorDong

原文链接

让我们来看看如何获得一个元素的所有兄弟元素。
比如,你已获得一个列表中的一项(一个li),可以采用什么方法得到这个列表中其它的(li)项。jQuery中的siblings()方法使这一操作十分容易。
除此之外,我们可以利用原生JavaScript轻松构造一个只有8行代码的辅助函数实现同一目标。

开始构造

首先,创建一个辅助函数命为getSiblings()

var getSiblings = function(elem) {
  // Code goes here
} 

现在,创建一个数组,我们要将每个兄弟元素推入其中

var getSiblings = function(elem) {
    var siblings = [];
}

接下来,我们想获取我们的第一个兄弟元素,用一个列表来举例,我们想获取列表中的第一个<li>,我们已获得的<li>元素也属于这个列表。
我们将使用.parentNode属性来得到父元素列表,接着使用.firstChlid属性来得到这个列表的第一项。

var getSiblings = function(elem) {
    var siblings = []
    var sibling = elem.parentNode.firstChild
} 

获得所有的兄弟元素

现在,我们准备循环遍历每个兄弟元素并把它们推进我们的数组。
我们利用for循环来做这件事,在循环的每次迭代结束后,我们将使用nextSibling属性更新sibling的值为列表中下一个兄弟节点。
只要sibling存在(Booleantrue),我们将一直这个循环。

var getSiblings = function (elem) {
    var siblings = []
    var sibling = elem.parentNode.firstChild
    for( ; sibling; sibling = sibling.nextsibling) {
        // Do something...
    }    
}

在我们的循环中,我们想检查当前的siblings是否为已获得的elem元素,如果是我们就跳过当前这次循环。
同样我们也想确认当前的siblings是一个原元素节点,而不是一个字符文本或其它相似的怪异的东西。我们使用nodeType来检查。
否则,我们将sibling推入siblings数组中。

var getSiblings = function (elem) {
    var siblings = []
    var sibling = elem.parentNode.firstChild
    for( ; sibling; sibling = sibling.nextsibling) {
        if (sibling.nodeType !== 1 || sibling === elem)  continue;
        siblings.push(sibling) 
    }    
}

在最后,当循环结束时,我们将返回该数组

var getSiblings = function (elem) {
    var siblings = []
    var sibling = elem.parentNode.firstChild
    for( ; sibling; sibling = sibling.nextsibling) {
        if (sibling.nodeType !== 1 || sibling === elem)  continue;
        siblings.push(sibling) 
    }
    return siblings    
}

你有可能像这样使用这个函数

var elem = document.querySelector('#some-element')
var siblings = getSibings(elem)
上一篇下一篇

猜你喜欢

热点阅读