JS 实现sibling()

最新推荐文章于 2022-04-18 10:42:17 发布

转载最新推荐文章于 2022-04-18 10:42:17 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flower46273736/p/6478304.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript来改变HTML列表中特定项的颜色的方法，并同时调整其兄弟元素样式的技巧。通过选择指定的列表项并应用颜色变化，可以实现突出显示的效果。此外，还介绍了如何遍历并修改被选元素的兄弟元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>



</ul>       

        
<script type="text/javascript">
        var third = document.querySelectorAll('li')[8];
        third.style.color="#f00";
        
        function siblings(elm) {        
            var p = elm.parentNode.children;//获取父级所有子集元素
            for(var i =0,pl= p.length;i<pl;i++) {
                if(p[i] !== elm){           //剔除自己
                    p[i].style.color="#f90"; //执行事件
                }       
            }
        
        }
        
        siblings(third);
     
</script>

转载于:https://www.cnblogs.com/flower46273736/p/6478304.html