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

时间：2022-04-18 16:41:35

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、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             margin-top: 5px;width: 150px;

         }    

     </style>

 </style>

 </head>

 <body>

     <ol>

         <li>列表项0</li>

         <li>列表项1</li>

         <li>列表项2</li>

         <li class="red">列表项3</li>

         <li class="red">列表项4</li>

         <li class="green">列表项5</li>

         <li>列表项6</li>

         <li>列表项7</li>

     </ol>

     <input id="btn1" type="button" value='向前查找'>

     <input id="btn2" type="button" value='向后查找'>

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 // $('li:last').prev().css('background','red')

                 // $('li:last').prevAll('.red').css('background','red')

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

             })

             $('#btn2').click(function(){

                 //$('li:first').next().css('background','red')

                 // $('li:first').nextAll('.red').css('background','red')

                 // $('li:first').nextUntil('.red').css('background','red')

                 $('.green').siblings().css('background','red')

             })

         })

     </script>

 </body>

 </html>
 

相关文章