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>