淺談jquery中next與siblings的區(qū)別

更新時(shí)間：2016年10月27日 10:41:36 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談jquery中next與siblings的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

siblings([expr]):

概述

取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有唯一同輩元素的元素集合。

[expr] ：可以用可選的表達(dá)式進(jìn)行篩選。用于篩選同輩元素的表達(dá)式

示例

找到每個(gè)div的所有同輩元素。

HTML 代碼:

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

jQuery 代碼:

$("div").siblings()

結(jié)果:

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

找到每個(gè)div的所有同輩元素中帶有類名為selected的元素。

HTML 代碼:

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

jQuery 代碼:

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

結(jié)果:

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

取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合。

這個(gè)函數(shù)只返回后面那個(gè)緊鄰的同輩元素，而不是后面所有的同輩元素（可以使用nextAll）?？梢杂靡粋€(gè)可選的表達(dá)式進(jìn)行篩選。

示例

描述:

找到每個(gè)段落的后面緊鄰的同輩元素。

HTML 代碼:

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

jQuery 代碼:

$("p").next()

結(jié)果:

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

描述:

找到每個(gè)段落的后面緊鄰的同輩元素中類名為selected的元素。

HTML 代碼:

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

jQuery 代碼:

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

結(jié)果:

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

nextAll([expr])：查找當(dāng)前元素之后所有的同輩元素。

示例：

描述:

給第一個(gè)div之后的所有元素加個(gè)類

HTML 代碼:

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

jQuery 代碼:

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

結(jié)果:

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

實(shí)際應(yīng)用案例

刪除第一個(gè)tr元素后面所有tr，然后在重新創(chuàng)建這些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();

重新創(chuàng)建tr元素的將不能正確執(zhí)行

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

發(fā)現(xiàn)問題了，用錯(cuò)了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);

以上就是小編為大家?guī)淼臏\談jquery中next與siblings的區(qū)別全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: