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 相关文章推荐
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
实例浅析js的this
Dec 11 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
基于iview的router常用控制方式
May 30 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
基于Vant UI框架实现时间段选择器
Dec 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
php中的常用魔术方法总结
2013/08/02 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
vue--vuex详解
2019/04/15 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
使用python实现knn算法
2017/12/20 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python socket 聊天室实例代码详解
2019/11/14 Python
基于python 凸包问题的解决
2020/04/16 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python中K-means算法基础知识点
2021/01/25 Python
Python实现简单猜数字游戏
2021/02/03 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
《去年的树》教学反思
2014/04/11 职场文书
监察建议书格式
2014/05/19 职场文书
婚礼秀策划方案
2014/05/19 职场文书
民用住房租房协议书
2014/10/29 职场文书
行政文员岗位职责
2015/02/04 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
MySQL 字符集 character
2022/05/04 MySQL