jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()

亦凉 2022-04-17 03:13 113阅读 0赞

作者：老默 [http://www.cnblogs.com/laomo/ ][http_www.cnblogs.com_laomo]

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()  
这几个筛选器都是找兄弟结点的

.next(expr) - 查找紧挨着的弟弟  
.nextAll(expr) - 查找所有的弟弟  
.nextUntil(expr) - 查找所有弟弟，直到碰到符合expr条件，不包含符合expr条件的那个元素  
.prev(expr) - 查找紧挨着的哥哥  
.prevAll(expr) - 查找所有的哥哥  
.prevUntil(expr) - 查找所有的哥哥，直到碰到符合expr条件，不包含符合expr条件的那个元素  
.siblings(expr) - 查找所有兄弟（包括哥哥和弟弟）

测试用例：

![复制代码][copycode.gif]

<body>
    <div id="main">
        <div id="hot" class="rightbar">
            <h2>热门推荐</h2>
            <ul>
                <li>
                    <ul>
                        <li class="p">融氏橄榄油</li>
                        <li>帮宝适纸尿裤</li>
                        <li id="h">有机大米</li>
                        <li>妙洁垃圾袋</li>
                        <li>优乐美奶茶</li>
                        <li class="m">亲亲果冻</li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li>海飞丝洗头膏</li>
                        <li>六神花露水</li>
                        <li>舒肤佳香皂</li>
                        <li>心相印纸巾</li>
                        <li>哇哈哈矿泉水</li>
                        <li>王老吉</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    </body>

![复制代码][copycode.gif]

测试1：测试next，让id="h"的li元素（有机大米）的下一个弟弟高亮

$("#h").next().css("background-color","red");

效果：

![16120129-edf178367a5f427abf5793a8073f63e9.jpg][]

测试2：测试nextAll，让id="h"的li元素（有机大米）的所有弟弟高亮

$("#h").nextAll().css("background-color","red");

效果：

![16120138-236c04acf5954a33b21e303e1a99df1f.jpg][]

测试3：测试nextUntil，让id="h"的li元素（有机大米）的所有弟弟高亮，直到碰到类名是m的元素终止

$("#h").nextUntil(".m").css("background-color","red");

效果：

![16120145-fe1bc5399cc842a49afca67df0b53f55.jpg][]

prev与next是一样的，只不过一个是哥哥，一个是弟弟，同样的prevAll和nextAll，prevUntil和nextUntil也基本一样，不再重复测试

测试4：测试siblings，让id="h"的li元素（有机大米）的所有兄弟都高亮（包括哥哥和弟弟）

$("#h").siblings().css("background-color","red");

效果：

![16120152-71702a94fcdb473e9759fa5e71e5d731.jpg][]

测试5：测试siblings，让id="h"的li元素（有机大米）的所有兄弟中符合类名是m的高亮

$("#h").siblings(".m").css("background-color","red");

效果：

![16120200-5d00531e0b174d5fb9652d2621b91be5.jpg][]

[http_www.cnblogs.com_laomo]: http://www.cnblogs.com/laomo/%C2%A0
[copycode.gif]: /images/20220417/3a6914a2d50241e0ad9d95761b852495.png
[16120129-edf178367a5f427abf5793a8073f63e9.jpg]: /images/20220417/b7ce4061753846fd8a1fab1b0f69a8bc.png
[16120138-236c04acf5954a33b21e303e1a99df1f.jpg]: /images/20220417/fa5cad91af2441fe95bfa5a0284404e8.png
[16120145-fe1bc5399cc842a49afca67df0b53f55.jpg]: /images/20220417/0bc5e222a402482d9802dc2c53f1886a.png
[16120152-71702a94fcdb473e9759fa5e71e5d731.jpg]: /images/20220417/b4f509594b9e49b9a2a0acbb328764ab.png
[16120200-5d00531e0b174d5fb9652d2621b91be5.jpg]: /images/20220417/f73d560f3af0468e9c81c6f26dfe78ab.png