微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

浅谈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的区别全部内容了,希望大家多多支持编程之家~

原文地址:https://www.jb51.cc/jquery/44839.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐