JS 遍历兄弟元素

马黑黑 · 发表于 2023-2-17 08:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-2-17 08:31 编辑

有人问我，jQuery内部为什么使用了比较笨拙的方法遍历兄弟元素。我的答案是：为了兼容。jQuery所封装的方法都充分考虑兼容问题，所以它的方法不一定是最科学的但是肯定是最有效的。

原生JS遍历兄弟元素可以有很多方法，比方说直接法，JS内置的 nextElementSibling 和 previousElementSibling 就可以直接查询下一个和上一个兄弟元素，但封装起来会啰嗦一点，所以可以换个思路：找到父元素，查询父元素下的所有子元素，它们就是兄弟元素。

我们来看看第二种方法。假设有这么一个HTML局部文档结构：

<div id="mydiv">
      <div>Div</div>
      <p>P1</p>
      <p>P2</p>
      <p id="p3" style="color: red;">P3</p>
      <p>P4</p>
      <p>P5</p>
      <input type="text" value="Text Box"/>
      <button>Button</button>
</div>

我们能一眼瞧出来，id="mydiv" 的 div 是父元素，其下有 div、p、input、button 等子元素，这些子元素平级，它们全部都是一个父亲的孩子，所以叫兄弟元素。现在，id="p3" 是我们已经获知的元素，我们要查找出它的所有兄弟元素，并令它们的前景色和自己的一样。看JS代码：

<script>

let siblings = p3.parentElement.children;
let color = p3.style.color || 'red';
[...siblings].forEach((item,key) => item.style.color = color);

</script>

第一句：这个是二合一的语句，p3.parentElement 得到的是 p3 的父元素，p3.parentElement.children 得到的是 p3 父元素的所有的孩子（包括p3自己在内）。然后将获取到的值存储到 siblings 变量里。

第二句：获取 p3 的最终渲染前景色，即 p3.style.color，如果 p3 没有设置前景色，则设置颜色为 red（红色），并保存在变量 color 里。

第三句：遍历获取到的兄弟元素，设置前景色为 color 变量存储的值。这个设置，p3 也会重新设置，因为我们没有使用排除法将其剔除。

其实获取兄弟元素仅第一句代码就已完成，简单的一匹，但是，它的兼容性是有问题的：除了现代浏览器，古董级别的浏览器是无法识别诸如 children、parentElement 等等JS新概念，所以jQuery并不采用，宁可多绕点弯儿。

效果请看下楼。