jQuery基础教程之遍历节点siblings()方法使用说明

siblings()方法

.siblings([selector])

此方法获取每个匹配元素的前后所有的同辈元素，然后作为一个jquery包装集返回。另外还可以传递一个选择器表达式参数给它，在这些同辈元素中进行筛选。

接下来看两个例子：

 代码如下 复制代码

<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>

$(".li2").siblings().css("background","#FF0000");

上面jquery代码的结果是:
两个ul中的第一个和第三个li的背景会变成红色。

例

 代码如下 复制代码

<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<script>
$(".li2").siblings().css("background","#FF0000");
</script>

面的例子是没有传入选择器表达式参数的，那下面再给.siblings方法传入参数，看看结果是什么样的。
jquery代码2：

 代码如下 复制代码

$(".li2").siblings(":first").css("background","#FF0000");

上面的jquery代码运行的结果是：
第一个ul中的第一个li背景颜色变成红色

例

 代码如下 复制代码

<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<script>
$(".li2").siblings(":first").css("background","#FF0000");
</script>
时间： 2024-11-08 23:13:31

jQuery基础教程之遍历节点siblings()方法使用说明的相关文章

jQuery遍历节点-find()方法使用说明

find(selector) 此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了. 我最近才想明白,利用jquery方法如何找到一个元素中的所有的后代元素.使用这个.find()方法就可以轻松地做到. 来看例子:  代码如下 复制代码 <div id="level_one">     我是最外一层的div纯文本内容     <div>         我是

jQuery遍历节点树方法分析_jquery

本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&

jquery 遍历节点-parent()方法

jquery a遍历节点-parent()方法 .parent([selector])方法返回的是每一个匹配的元素的父元素的集合. 这里selector是可选参数,是用于过滤父元素的选择器表达式. HTML代码:  <DIV class=demo>   <DIV><p><A title=jquery href="/">jquery</A>学习</p></DIV>   <DIV class=sele

jquery基础教程之deferred对象使用方法

 jquery基础教程之deferred对象使用方法 一.什么是deferred对象?   开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的.   通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数.   但是,在回调函数方面,jQuery的功能非常弱.为了改变这一点,jQuery开发团队就设计了deferr

递归-jquery基础教程中关于内部函数问题

问题描述 jquery基础教程中关于内部函数问题 jquery在讲解内部函数中说, "递归但却带有非递归API包装的算法通常 最适合通过内部函数来表达." 这句话该怎么理解. 解决方案 递归函数显然只有自身才调用自身,别的地方不需要调用它,那么定义成单独的函数没有必要,可以作为内部函数. 带不带有非递归API包装并不打紧.不带API调用,或者带有递归API调用也可用内部函数.除非看API的源代码,鬼才知道一个API是否内部用递归实现的. 解决方案二: 楼主去哪里看到的这个说明,英文好最

jQuery实现查找最近父节点的方法_jquery

本文实例讲述了jQuery实现查找最近父节点的方法.分享给大家供大家参考,具体如下: 这里演示查找当前控件最近的table <html> <head> <title>usually function</title> </head> <body> <table name="name_table1"> <tr> <td>table1</td> </tr> &l

【jQuery教程】jquery基础教程二(鼠标点击事件)

下面我们来看看jquery如何给 DOM 各个元素批量绑定事件 <SCRIPT LANGUAGE="JavaScript"> <!-- $(document).ready(function() {     $("div").click(function(){//$("div")就是页面中所有的 div标签       alert("Hello World!");     }) }) //--> <

Jquery遍历节点的方法小集_jquery

复制代码 代码如下: <!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=&qu

jQuery遍历节点-closest()方法使用详解

closest() 此方法获取第一个相匹配的祖先元素,注意:起始点包括自身元素. 另外这个方法是必须要传入一个选择器表达式参数的,如果不传入参数的话,就会返回一个空的jquery对象. 要注意这个方法和jquery中的parents()方法的区别. 下面来看实例:  代码如下 复制代码 <div class="demo">梦三秋博客     <ul>         <li>第一个li</li>         <li class=