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 相关文章推荐
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
jQuery实现日历效果
Sep 11 jQuery
原生js实现表格循环滚动
Nov 24 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
《可爱的动物》教学反思
2014/02/22 职场文书
小学校长汇报材料
2014/08/20 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
交通处罚决定书
2015/06/24 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python