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. android-Preference 风格调整

    <CheckBoxPreference android:defaultValue="false" android:layout="?android:attr/pre ...

  2. Zabbix监控告警

    一 钉钉告警 1.1.1 添加钉钉机器人 发起群聊 创建完群聊选择,机器人管理 选择你要绑定的群聊 复制下面地址留用 1.1.2 编写钉钉告警脚本 安装requests库,HTTP客户端, # yum ...

  3. Flume的可靠性

    Flume的可靠性 当节点出现故障时,日志能够被传送到其他节点上而不会丢失. Flume提供了三种级别的可靠性保障,从强到弱依次分别为:end-to- end(收到数据agent首先将event写到磁 ...

  4. golang 逐行读取文件

    package main import ( "bufio" "fmt" "io" "os" ) func main() ...

  5. JXNU 新生选拔赛

    1001 最小的数 Problem Description 定义一种正整数集合K,集合中有N个数,集合中元素Ki(1<=i<=N)是包含i个不同质因子的最小的数.因为Ki可能会很大,所以将 ...

  6. Non-resolvable parent POM for **: Could not find artifact **

    注意查看这句: 原因是本地仓库缺少了easybuy-parent:pom:0.0.1-SNAPSHOT, 原来是忘记了将父工程打包到本地仓库 ,运行聚合工程前记得先将依赖的工程都先Maven inst ...

  7. eclipse中修改了代码编译后执行不起作用

    在网上试了好多方法都没解决 后来,删了eclipse里的服务器,重新创建了一下,重新运行自己的工程发现修改的代码起作用了.

  8. python绘图问题

    论文绘图整理 # coding: utf-8 #来源:https://blog.csdn.net/A_Z666666/article/details/81165123 import matplotli ...

  9. C# 反射基础运用

    反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型 (包括类.结构.委托.接口和枚举等)的成员和成员的信息. 其实有些人会问, 像我们平常引用DLL可以直接用, 为什么要用 ...

  10. android对话框(Dialog)的使用方法

    Activities提供了一种方便管理的创建.保存.回复的对话框机制.比如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...