一、siblings()方法
返回被选元素的所有同胞（不包含自己）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery同胞</title> <style> body { color: #fff; } .container * { display: block; border: 1px solid black; color: white; padding: 5px; margin: 15px; } .container div { background-color: #333; } ul { background-color: #555; } ul li { background-color: #777; } p { background-color: #999; } </style> </head> <body> body元素 <div class="container" style="width: 300px;"> <div>div <ul>ul <li class="li1">第一个li元素</li> <!-- <p></p> --> <li class="li2">第二个li元素</li> <li class="li3">第三个li元素</li> <p class="p1">p1</p> </ul> </div> </div> <script src="../jquery-3.6.0.js"></script> <script> $(function () { $('.li1').siblings().css({ //返回被选元素的所有的同胞(不包含它本身) backgroundColor: 'red', border: '1px solid #fff', }) }) </script> </body> </html>
效果如图：
二、next()方法
返回被选元素的下一个同胞（同级元素）
$('.li1').next().css({}） //获取第一个li元素的下一个同胞
效果：
三、prev()方法
返回被选元素的上一个同胞。
$('.li2').prev().css({}） //获取第二个li元素的上一个同胞
效果如下：
四、nextAll()方法
返回被选元素的所有跟随的同胞元素
第一个例子：
$('.li1').nextAll().css({}) //获取所有li1以下的所有同胞
sibilings和nextAll的区别在于sibilings是获取所有的同胞，nextAll是获取被选定元素下面的所有同胞
第二个例子：
$('.li2').nextAll().css({}) //获取li2以下的所有同胞
五、prevAll()方法
与nextAll()相反。
$('.p1').prevAll().css({ }) //返回p1上方的同级元素
效果如下图 ：
六、nextUntil()方法
返回介于两个给定参数之间的的所有同胞
$('.li1').nextUntil('.p1').css({}) //获取li1和p1之间的所有同胞
七、prevUntil()方法
与nextUntil()方法一致，方向相反
$('.p1').prevUntil('.li1').css({}） //获取p1和li1之间的所有同胞
总结：
siblings()：返回被选元素的所有同胞（不包含自己）
next()：返回被选元素的下一个同胞。
prev()：同2，方向相反
nextAll()：返回被选元素的所有跟随的同胞元素。
prevAll()：同3，方向相反。
nextUntil()：返回介于两个给定参数之间的所有同胞
prevUntil()：同5，方向相反
