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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
JS实现打砖块游戏
Feb 14 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 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
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP文件操作方法汇总
2015/07/01 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
python 负数取模运算实例
2020/06/03 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python 基于opencv实现图像增强
2020/12/23 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
《日月潭》教学反思
2014/02/28 职场文书
委托书怎么写
2014/07/31 职场文书
司机工作自我鉴定
2014/09/19 职场文书
复兴之路观后感
2015/06/02 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
使用Django实现商城验证码模块的方法
2021/06/01 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers