淺談jquery中next與siblings的區(qū)別
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的所有同輩元素中帶有類(lèi)名為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è)段落的后面緊鄰的同輩元素中類(lèi)名為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è)類(lèi)
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)問(wè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ī)?lái)的淺談jquery中next與siblings的區(qū)別全部?jī)?nèi)容了,希望大家多多支持腳本之家~
- jquery siblings獲取同輩元素用法實(shí)例分析
- jQuery中的siblings()是什么意思(推薦)
- 有關(guān)jQuery中parent()和siblings()的小問(wèn)題
- jQuery siblings()用法實(shí)例詳解
- jquery遍歷函數(shù)siblings()用法實(shí)例
- jQuery中的siblings用法實(shí)例分析
- jQuery中siblings()方法用法實(shí)例
- jquery next nextAll nextUntil siblings的區(qū)別介紹
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 仿jQuery的siblings效果的js代碼
- jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例
相關(guān)文章
jQuery組件easyui對(duì)話框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery組件easyui對(duì)話框?qū)崿F(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jQuery實(shí)現(xiàn)的選擇商品飛入文本框動(dòng)畫(huà)效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的選擇商品飛入文本框動(dòng)畫(huà)效果,結(jié)合完整實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)動(dòng)畫(huà)效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關(guān)技巧,需要的朋友可以參考下2016-08-08JQuery在循環(huán)中綁定事件的問(wèn)題詳解
下面小編就為大家?guī)?lái)一篇JQuery在循環(huán)中綁定事件的問(wèn)題詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jquery數(shù)據(jù)驗(yàn)證插件(自制,簡(jiǎn)單,練手)實(shí)例代碼
最近項(xiàng)目中js數(shù)據(jù)驗(yàn)證比較多,為了統(tǒng)一風(fēng)格,移植復(fù)用,于是順手封裝了Jquery的插件2013-10-10拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼
拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼,需要的朋友可以參考下2012-05-05jquery實(shí)現(xiàn)無(wú)刷新驗(yàn)證碼的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)無(wú)刷新驗(yàn)證碼的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery在ie6下無(wú)法設(shè)置select選中的解決方法詳解
這篇文章主要介紹了jQuery在ie6下無(wú)法設(shè)置select選中的解決方法,結(jié)合實(shí)例分析了jQuery在ie6下無(wú)法設(shè)置select選中的原因與相關(guān)處理技巧,需要的朋友可以參考下2016-09-09