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>