利用原生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
存在(Boolean
为 true
),我们将一直这个循环。
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)