浅谈jquery中next与siblings的区别

siblings([expr]):

概述

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

[expr] :可以用可选的表达式进行筛选。用于筛选同辈元素的表达式

示例

找到每个div的所有同辈元素。

HTML 代码:

rush:js;">

Hello

Hello Again

And Again

jQuery 代码:

rush:js;"> $("div").siblings()

结果:

rush:js;"> [

Hello

,

And Again

]

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:

rush:js;">
Hello

And Again

jQuery 代码:

rush:js;"> $("div").siblings(".selected")

结果:

rush:js;"> [

] next([expr]) :

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

示例

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<div class="jb51code">
<pre class="brush:js;">

Hello

Hello Again

And Again

jQuery 代码:

rush:js;"> $("p").next()

结果:

rush:js;"> [

Hello Again

,
And Again
]

描述:

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

rush:js;">

Hello

And Again

jQuery 代码:

rush:js;"> $("p").next(".selected")

结果:

rush:js;"> [

]

nextAll([expr]):查找当前元素之后所有的同辈元素。

示例:

描述:

给第一个div之后的所有元素加个类

HTML 代码:

rush:xhtml;">

jQuery 代码:

rush:js;"> $("div:first").nextAll().addClass("after");

结果:

rush:js;"> [
,
,
]

实际应用案例

删除一个tr元素后面所有tr,然后在重新创建这些tr:

rush:js;"> $(".rili_tab01 tr:first").next().remove(); var retRow = ""+ret["eventCountry"]+"

这是尝试之后能够正确显示的,下面用另一种方式就只能完成第一步 $(".rili_tab01 tr:first").siblings.remove();

重新创建tr元素的将不能正确执行

换成siblings()也是可以的$(".rili_tab01 tr:first").siblings().remove();

发现问题了,用错了siblings方法了,正确的是加括弧的,

rush:js;"> $(".rili_tab01 tr:first").siblings().remove(); var retRow = ""+ret["eventCountry"]+"

以上就是小编为大家带来的浅谈jquery中next与siblings的区别全部内容了,希望大家多多支持编程之家~

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...