js进阶 11-17 juqery如何查找一个元素的同级元素

一、总结

一句话总结：三个方法，向前（prev()），向后（next()）和兄弟（siblings()），而前面两个每个都对应三个，prev()，prevAll()，prevUntil()。

1、jquery中某个功能的一般延伸方法有哪些，比如向前找兄弟？

prev()，prevAll()，prevUntil()

prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

33                 // $('li:last').prev().css('background','red')
34                 // $('li:last').prevAll('.red').css('background','red')
35                 $('li:last').prevUntil('.red').css('background','red')

2、jquery中查找同级元素有哪三个方法？

向前（prev()），向后（next()）和兄弟（siblings()）

32             $('#btn1').click(function(){
33                 // $('li:last').prev().css('background','red')
34                 // $('li:last').prevAll('.red').css('background','red')
35                 $('li:last').prevUntil('.red').css('background','red')
36             })
37             $('#btn2').click(function(){
38                 //$('li:first').next().css('background','red')
39                 // $('li:first').nextAll('.red').css('background','red')
40                 // $('li:first').nextUntil('.red').css('background','red')
41                 $('.green').siblings().css('background','red')
42 
43 
44             })

3、jquery中查找方法中如何进一步限制（几乎所有的jquery方法都可以进一步加选择器限制所选范围）？

方法中可以放参数，参数可以是标签和选择器和jquery对象

35                 $('li:last').prevUntil('.red').css('background','red')

4、几乎所有的jquery方法都可以进一步加选择器限制所选范围么？

可以，比如这里的查找同级

38                 //$('li:first').next().css('background','red')
39                 // $('li:first').nextAll('.red').css('background','red')
40                 // $('li:first').nextUntil('.red').css('background','red')
41                 $('.green').siblings().css('background','red')

二、juqery如何查找一个元素的同级元素

1、相关知识

向前查找

prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

向后查找

next() 获得匹配元素集合中每个元素紧邻的同辈元素。
nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。

查找所有兄弟元素

siblings() 方法返回被选元素的所有同胞元素。

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         li{
11             margin-top: 5px;width: 150px;
12         }    
13 
14     </style>
15 </style>
16 </head>
17 <body>
18     <ol>
19         <li>列表项0</li>
20         <li>列表项1</li>
21         <li>列表项2</li>
22         <li class="red">列表项3</li>
23         <li class="red">列表项4</li>
24         <li class="green">列表项5</li>
25         <li>列表项6</li>
26         <li>列表项7</li>
27     </ol>
28     <input id="btn1" type="button" value='向前查找'>
29     <input id="btn2" type="button" value='向后查找'>
30     <script type="text/javascript">
31         $(function(){
32             $('#btn1').click(function(){
33                 // $('li:last').prev().css('background','red')
34                 // $('li:last').prevAll('.red').css('background','red')
35                 $('li:last').prevUntil('.red').css('background','red')
36             })
37             $('#btn2').click(function(){
38                 //$('li:first').next().css('background','red')
39                 // $('li:first').nextAll('.red').css('background','red')
40                 // $('li:first').nextUntil('.red').css('background','red')
41                 $('.green').siblings().css('background','red')
42 
43 
44             })
45         })
46     </script>
47 </body>
48 </html>