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 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
Bootstrap插件全集
Jul 18 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 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读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
node跨域请求方法小结
2017/08/25 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
英语教师岗位职责
2014/03/16 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
厨房管理计划书
2014/04/27 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript