jQuery 兄弟元素选择器

小鱼儿 2022-05-12 12:26 278阅读 0赞

本篇文章介绍jQuery的兄弟元素选择器

什么是兄弟元素？

<ul id="list">
        <li class="li-1">web-7258</li>
        <li class="li-2">web前端</li>
        <li class="li-3">helang.love@qq.com</li>
        <li class="li-4">web梦之蓝</li>
        <li class="li-5">jQuery之美</li>
    </ul>

兄弟接点的查找方式有很多，本文章只列举出实用性较高的方式

**1、$(selector).prevAll( selector )**

功能描述：获得集合中每个匹配元素的所有前面的兄弟元素，选择性筛选的选择器。

$(".li-3").prevAll("li");   // ['li-1','li-2']

**2、$(selector).nextAll( selector )**

功能描述：获得每个匹配元素集合中所有下面的同辈元素，选择性筛选的选择器。

$(".li-3").nextAll("li");   // ['li-4','li-5']

**3、$(selector).siblings( selector )**

功能描述：获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。

$(".li-3").siblings("li");  // ['li-1','li-2','li-4','li-5']

为了能让上面所介绍的方法做点什么，设当前需求如下：

当 <li> 触发点击事件后：

1.  当前所点击的元素设置设置 颜色为 蓝色，字体大小为 20px；
2.  所点击元素之前的所有兄弟节点设置颜色为 绿色，字体大小为 16px；
3.  所点击元素之后的所有兄弟节点设置颜色为 红色，字体大小为 16px；

实现代码如下：

$("#list").on("click",">li",function () {
        /* 当前触发事件元素 之前 的所有兄弟元素设置颜色为 绿色 */
        $(this).prevAll("li").css("color","#00ff00");
        /* 当前触发事件元素 之后 的所有兄弟元素设置颜色为 红色 */
        $(this).nextAll("li").css("color","#ff0000");
        /* 当前触发事件元素的所有兄弟元素设置字体大小为 16px */
        $(this).siblings("li").css("font-size","16px");
        /* 当前触发事件元素设置 颜色为 蓝色，字体大小为 20px*/
        $(this).css({
            "color":"#0000ff",
            "font-size":'20px'
        });
    });

上述代码不是合理的写法，只为体现这三种方法的功能。

使用兄弟元素选择器的前提是自己能写得一手好HTML代码，结构性强，才能良好的运用兄弟元素选择器，在处理表单体验这一块，兄弟元素选择器尤为重要。是jQuery插件开发者必须掌握的知识点。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220512/6f57d5f0ec3d4c69ab773a9685b2132c.png