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. javascript类型系统之基本数据类型与包装类型

    javascript的数据类型可以分为两种:原始类型和引用类型 原始类型也称为基本类型或简单类型,因为其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈(stack)中(按值访问) ...

  2. 深入理解Java内存模型--转载

    原文地址:http://www.infoq.com/cn/articles/java-memory-model-1 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之 ...

  3. python 新模块或者包的安装方法

    主要介绍通过pip自动工具来安装需要的包. 1,先安装pip 下载pip的包(包括setup.py文件) cmd载入到pip本地文件所在路径,使用命令进行安装. python setup.py ins ...

  4. 记2018/5/5 qbxt 测试

    记2018/5/5 qbxt 测试 竞赛时间: 2018 年 5 月 5 日 13:30-17:00 T1 一.maze(1s,512MB): 简单的迷宫问题:给定一个n*m的迷宫,.表示可以通过,# ...

  5. xml数据文件上传至数据库

    上传xml文件数据到数据库思路:首先上传需要建校验xml字段的校验文件,然后程序根据后台写好的xml数据文件路径自动读取数据文件,再上传数据文件到数据库之前先根据校验文件校验上传的数据文件的字段是否合 ...

  6. 洛谷——P1056 排座椅

    https://www.luogu.org/problem/show?pid=1056#sub 题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主 ...

  7. Sql Server服务 远程过程调用失败

    问题: 今天SQL数据库登录不上了,然后想启动Sql实例,却发现如下问题(配置环境:win7旗舰版x64,SqlServer2008R2,同时安装VS2012): 以前出现过这个问题,那时候是因为把实 ...

  8. Mysql5.7.19压缩版安装步骤及踩过的坑

    安装Mysql5.7.19压缩版 一:下载压缩包 1.从MySQL官网下载MySQL Community Server 5.7.19,此版本为免费版. 2.下载完成之后解压缩,打开之后文件夹如下:   ...

  9. Haproxy 为 mysql 做负载均衡

    .tar.gz cd haproxy- uname -r vim /etc/haproxy.cfg global #日志 log 127.0.0.1 local0 maxconn chroot /tm ...

  10. 异步FIFO设计

    参考http://www.cnblogs.com/BitArt/archive/2013/04/10/3010073.html http://blog.sina.com.cn/s/blog_6d30f ...