siblings([expr]):

概述

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

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

示例

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

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

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

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("div").siblings(".selected")

结果:

[ <p class="selected">Hello Again</p> ] next([expr]) ： 

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

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

示例

描述:

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

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

描述:

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

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ] 

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

示例：

描述:

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

HTML 代码:

<div></div><div></div><div></div><div></div>

jQuery 代码:

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

结果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ] 

实际应用案例

删除第一个tr元素后面所有tr，然后在重新创建这些tr：

$(".rili_tab01 tr:first").next().remove();
var retRow = "<tr><td>"+ret["eventTime"]+"</td><td >"+ret["eventCountry"]+"</td><td>"+ret["eventContent"]+"</td></tr>";
$(".rili_tab01 tr:last").after(retRow);

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

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

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

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

$(".rili_tab01 tr:first").siblings().remove();
var retRow = "<tr><td>"+ret["eventTime"]+"</td><td >"+ret["eventCountry"]+"</td><td>"+ret["eventContent"]+"</td></tr>";
 $(".rili_tab01 tr:last").after(retRow);

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

jQuery 检查某个元素在页面上是否存在实例代码
最近做项目，有这么个功能用jQuery检查某个元素在网页上是否存在，这里记录下，也许能帮助正在读文章的朋友。用jQuery检查某个元素在网页上是否存

js 实现一些跨浏览器的事件方法详解及实例
js实现一些跨浏览器的事件方法用JavaScript实现事件的绑定，移除，以及一些常用的事件属性的获取，时常要考虑到在不同浏览器下的兼容性，下面给出

浅谈jQuery中的eq()与DOM中element.[]的区别
如下所示：!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/title/headbodyaclass="a"#1/aaclass="a"#2/aaclass="a"#3/ascriptsrc="js/jq.js"/scriptscriptvara=$('.a');varb=$('.a').eq(1);varc=