JS 遍历兄弟元素
本帖最后由 马黑黑 于 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并不采用，宁可多绕点弯儿。
效果请看下楼。
<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>
<p><br><br><input id="okey" type="button" value="点击我改变所有兄弟元素前景色" /></p>
<script>
okey.onclick = () => {
let siblings = p3.parentElement.children;
let color = p3.style.color || 'red';
[...siblings].forEach((item,key) => item.style.color = color);
}
</script>
本帖最后由 起个网名好难 于 2023-2-17 12:16 编辑
$("#p3").parent().children().css({"color":"red"});或
$("#p3").siblings().css({"color":"red"});
拉上所有兄弟，一起投身革命的伟大事业{:4_173:} 慢慢体会这些技术。 庶民 发表于 2023-2-17 11:38
慢慢体会这些技术。
{:4_190:} 红影 发表于 2023-2-17 10:11
拉上所有兄弟，一起投身革命的伟大事业
红红火火干革命挺好{:4_181:} 起个网名好难 发表于 2023-2-17 10:09
$("#p3").parent().children().css({"color":"red"});或
$("#p3").siblings().css({"color":"red"});
我说的是它的内部实现机制。封装过的用起来自然顺手{:4_170:} 又顿悟新功法了{:4_203:} 马黑黑 发表于 2023-2-17 12:25
红红火火干革命挺好
找齐所有兄弟，用这个法子真好{:4_187:} 马黑黑 发表于 2023-2-17 12:26
我说的是它的内部实现机制。封装过的用起来自然顺手
轮子不错 起个网名好难 发表于 2023-2-17 16:01
轮子不错
对，结实 红影 发表于 2023-2-17 14:14
找齐所有兄弟，用这个法子真好
都要找找 樵歌 发表于 2023-2-17 13:21
又顿悟新功法了
这个无需顿悟 马黑黑 发表于 2023-2-17 19:34
都要找找
其实每个功能单独讲的时候还能看明白点，合在一起就又糊涂了。 红影 发表于 2023-2-17 21:03
其实每个功能单独讲的时候还能看明白点，合在一起就又糊涂了。
必须合在一起，否则没有多大意义 马黑黑 发表于 2023-2-17 21:28
必须合在一起，否则没有多大意义
知道啊，只是我笨，所以学得慢{:4_173:} 红影 发表于 2023-2-17 22:08
知道啊，只是我笨，所以学得慢
慢慢学 马黑黑 发表于 2023-2-17 22:35
慢慢学
嗯嗯，只要不停行走，总有一天能走到目标的。 红影 发表于 2023-2-18 10:53
嗯嗯，只要不停行走，总有一天能走到目标的。
都不了的话那是因为路实在太远太远
页:
[1]
2