jQuery搜索同辈元素方法


Posted in Javascript onFebruary 10, 2015

本文实例讲述了jQuery搜索同辈元素方法。分享给大家供大家参考。具体分析如下:

1. next()方法

用于搜索紧跟在每个匹配元素之后的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下:

next([selector])

$("p").next("p").css("color", "#FCF");

2. nextAll()方法

用于搜索紧跟在每个匹配元素之后的所有同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选

nextAll([selector])

$("p").nextAll().css("color", "blue");

3. nextUtil()方法

用于获取紧跟在每个匹配元素后面的同辈元素,直至匹配给定选择器的元素(但不包括该元素),格式如下:

nextUtil([selector])

实例:

$("#div1").nextUtil("div").css("border", "1px solid red");

将id为div1的元素开始到下一个div元素结束的所有中间的同辈元素的边框设置为红色

4. prev()方法

用于搜索紧邻每个匹配元素前面的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下:

prev([selector])

实例:

$("#div2").prev("span").css("color", "blue");
与div2元素紧邻的前面的一个span元素的字体将变为蓝色。

5. prevAll()方法

用于搜索当前元素之前的所有同辈元素,也可以指定一个选择器对同辈元素进行筛选。语法格式如下:

prevAll([selector])

6. prevUtil()方法

用于搜索当前元素之前的所有同辈元素,直到遇到匹配的那个元素为止,语法格式如下:

prevUtil([selector])

$("#div2").prevUtil("input").css("color", "red");

7. siblings()方法

用于搜索每个匹配元素的所有同辈元素,根据需要还可以指定一个选择器对这些同辈元素进行筛选。格式如下:

siblings([selector])

$("div").siblings().css("color", "red");

示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

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

<title>搜索指定元素的同辈元素</title>  

<script language="javascript" type="text/javascript">  

$(document).ready(function(){  

      $("#td1").next().css("color","red");   //给该td元素的下一个同辈元素设置字体颜色  

      $("#td1").nextAll().css("border","1px solid blue");//给该td元素的后面的所有的同辈元素设置边框  

      $("#td2").prev().css("color","#99c");  //给该td元素的前面的一个同辈元素设置字体颜色  

      $("#td2").prevAll().css("background","#FCF");//给该td元素的前面的所有的同辈元素设置背景  

      $("#td3").siblings().css("color","#99F");   //给当前领域中指定元素的同辈元素设置字体颜色  

})  

</script>  

</head>  

<body>  

<h3 align="center">酒店房间住宿情况表</h3>  

<table width="637" height="351" border="1">  

  <tr>  

    <td width="115" id="td1">单人间<span>(已住)</span></td>  

    <td width="112">双人间<span>(未住)</span></td>  

    <td width="134">豪华套房<span>(已住)</span></td>  

    <td width="117">单人间<span>(已住)</span></td>  

    <td width="125">豪华套房<span>(未住)</span></td>  

  </tr>  

  <tr>  

    <td>单人间<span>(已住)</span></td>  

    <td>双人间<span>(未住)</span></td>  

    <td id="td2">豪华套房<span>(未住)</span></td>  

    <td>单人间<span>(未住)</span></td>  

    <td>豪华套房<span>(未住)</span></td>  

  </tr>  

  <tr>  

    <td>单人间<span>(未住)</span></td>  

    <td>双人间<span>(未住)</span></td>  

    <td id="td3">豪华套房<span>(已住)</span></td>  

    <td>单人间<span>(已住)</span></td>  

    <td>豪华套房<span>(未住)</span></td>  

  </tr>  

  <tr>  

    <td>单人间<span>(已住)</span></td>  

    <td>双人间<span>(已住)</span></td>  

    <td>豪华套房<span>(未住)</span></td>  

    <td>单人间<span>(未住)</span></td>  

    <td>豪华套房<span>(已住)</span></td>  

  </tr>  

  <tr>  

    <td>单人间<span>(已住)</span></td>  

    <td>双人间<span>(未住)</span></td>  

    <td>豪华套房<span>(已住)</span></td>  

    <td>单人间<span>(已住)</span></td>  

    <td>豪华套房<span>(未住)</span></td>  

  </tr>  

</table>  

</body>  

</html>

效果图如下:

jQuery搜索同辈元素方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
vue环境搭建简单教程
Nov 07 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
package.json中homepage属性的作用详解
Mar 11 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
Jquery搜索父元素操作方法
Feb 10 #Javascript
jQuery表单域属性过滤器用法分析
Feb 10 #Javascript
jQuery子属性过滤选择器用法分析
Feb 10 #Javascript
jQuery内容过滤选择器用法分析
Feb 10 #Javascript
jQuery过滤选择器用法分析
Feb 10 #Javascript
jQuery表单域选择器用法分析
Feb 10 #Javascript
jQuery层级选择器用法分析
Feb 10 #Javascript
You might like
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
php和nginx交互实例讲解
2019/09/24 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python ljust rjust center输出
2008/09/06 Python
Python 元类实例解析
2018/04/04 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
办公室文秘岗位职责
2013/11/15 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
电子银行营销方案
2014/02/22 职场文书
小学教师岗位职责
2015/04/02 职场文书
放假通知格式
2015/04/14 职场文书
小学四年级作文之写景
2019/08/23 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
python中subplot大小的设置步骤
2021/06/28 Python