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>
 

js进阶 11-17 juqery如何查找一个元素的同级元素的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  3. js进阶正则表达式方括号（方括号作用）（js正则是在双正斜杠之中：/[a-z]/g）

    js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g) 一.总结 方括号:范围 圆括号:选 大括号:数量 1.js正则是在双正斜杠之中: var reg2=/[a-z]/ ...

  4. CSS圆角，输入框提示信息，JS查找同级元素

    input { /*设置边框*/ border:1px solid #95B8E7; border-radius: 5px; /*设置圆角,IE不兼容*/ height:18px } placehol ...

  5. js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代

    js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...

  6. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  7. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  8. js进阶 12-8 如何知道上一个函数的返回值是什么（如何判断上一个函数是否执行成功）

    js进阶 12-8 如何知道上一个函数的返回值是什么(如何判断上一个函数是否执行成功) 一.总结 一句话总结:event的result属性即可. 1.event的result属性的实际应用场景是什么? ...

  9. js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）

    js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...

随机推荐

  1. 【hoj】2160 bin packing 二分、贪心

    这个题是在二分的题单上的,可是依据二分法写出来的会在oj上超时.依据题目以下给出的提示能够发现能通过贪心法每次都找最能满足的情况去填充每个包,这样就能保证使用的包的数量是最少的 二分法解法: #inc ...

  2. 如何创建Hiren的BootCD USB磁盘 -- 制作U盘启动盘

    如何创建Hiren的BootCD USB磁盘 原文 https://www.wintips.org/how-to-create-hirens-bootcd-usb-disk/  本文基本是谷歌翻译 H ...

  3. 关于bcg库记忆界面的问题及其解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事向我请教一个问题,说他使用BCG创建了一个停靠栏,之后把代码注释了,但是程序启动时总出现一个Debug Ass ...

  4. D3.js中对array的使用

    由于D3类库和array密切相关,我们有必要讨论一下D3中的数据绑定以及在数组内部运算的方法. 1.D3中的数组 和其他编程语言一样,D3的数组元素可以是数字或者字符等类型,例如: someData= ...

  5. curl 使用 ~/.netrc ( Windows 上是 _netrc ) 问题

    curl 使用  --netrc-file <filemame> , -n, --netrc, --netrc-optional 等选项做登录认证时, 默认文件位于 ~/.netrc ( ...

  6. C#string转换为Datetime

    DateTime.ParseExact("0710090000", "MMddHHmmss", CultureInfo.CurrentCulture, Date ...

  7. Traveler Nobita （zoj 3456 最小生成树）

    Traveler Nobita Time Limit: 2 Seconds      Memory Limit: 65536 KB One day, Nobita used a time machin ...

  8. 2017.1-TOP5 Android开源库

    Colorful (Github) Colorful简单实用,通过这个开源库可以通过编码的方式来改变应用的主题,不再需要定义不同的style dependencies { compile 'com.g ...

  9. input选中 和 select点击下拉选择获取选中选项的值

    1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...

  10. JS实现动画方向切换效果(包括:撞墙反弹，暂停继续左右运动等)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...