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. [NOI.AC#40]Erlang

    链接 题解 显然,最多抽2个集合 如果一直抽一个,前提是该集合有重复的,答案是不同元素的个数+1 如果抽两个,那么最坏情况下,在一个集合中抽到某一个数的次数是这个集合不同元素的个数(因为抽不到重复的) ...

  2. elasticsearch java 客户端之action简介

    上一篇介绍了elasticsearch的client结构,client只是一个门面,在每个方法后面都有一个action来承接相应的功能.但是action也并非是真正的功能实现者,它只是一个代理,它的真 ...

  3. try {}里有一个return语句 finally执行顺序

    先看例子 package example; class Demo{ public static void main(String args[]) { int x=1; System.out.print ...

  4. Day3下午解题报告

    预计分数:20+40+30=90 实际分数:40+90+60=190 再次人品爆发&&手感爆发&&智商爆发 谁能告诉我为什么T1数据这么水.. 谁能告诉我为什么T2数据 ...

  5. select发生改变使用js提交form表单（get传值）

    form表单如下: <form id="my_form" method="get" action=""> <input t ...

  6. 至顶网推荐-Rpm另类用法加固Linux安全

    http://www.zdnet.com.cn/ 650) this.width=650;" onclick='window.open("http://blog.51cto.com ...

  7. pycharm 注册 License server方式

    在输入框输入以下内容即可:http://idea.yangyusb.com

  8. BZOJ3926: [Zjoi2015]诸神眷顾的幻想乡（广义后缀自动机）

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...

  9. oracle 归档模式和非归档模式

    http://www.cnblogs.com/gaojian/p/3611641.html http://blog.csdn.net/yong5241200/article/details/39451 ...

  10. 81.内存模式实现cgi查询

    创建全局的二级指针 char ** g_pp;//全局的二级指针 获取数据有多少行 //获取行数 int getimax() { ; FILE *pf = fopen(path, "r&qu ...