淺談jquery中next與siblings的區(qū)別
siblings([expr]):
概述
取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。
[expr] :可以用可選的表達(dá)式進行篩選。用于篩選同輩元素的表達(dá)式
示例
找到每個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> ]
找到每個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]) :
取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。
這個函數(shù)只返回后面那個緊鄰的同輩元素,而不是后面所有的同輩元素(可以使用nextAll)??梢杂靡粋€可選的表達(dá)式進行篩選。
示例
描述:
找到每個段落的后面緊鄰的同輩元素。
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> ]
描述:
找到每個段落的后面緊鄰的同輩元素中類名為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)前元素之后所有的同輩元素。
示例:
描述:
給第一個div之后的所有元素加個類
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> ]
實際應(yīng)用案例
刪除第一個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)問題了,用錯了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ū)別全部內(nèi)容了,希望大家多多支持腳本之家~
- jquery siblings獲取同輩元素用法實例分析
- jQuery中的siblings()是什么意思(推薦)
- 有關(guān)jQuery中parent()和siblings()的小問題
- jQuery siblings()用法實例詳解
- jquery遍歷函數(shù)siblings()用法實例
- jQuery中的siblings用法實例分析
- jQuery中siblings()方法用法實例
- jquery next nextAll nextUntil siblings的區(qū)別介紹
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 仿jQuery的siblings效果的js代碼
- jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例
相關(guān)文章
jQuery組件easyui對話框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery組件easyui對話框?qū)崿F(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08jQuery實現(xiàn)的選擇商品飛入文本框動畫效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的選擇商品飛入文本框動畫效果,結(jié)合完整實例形式分析了jQuery動態(tài)操作頁面元素屬性實現(xiàn)動畫效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關(guān)技巧,需要的朋友可以參考下2016-08-08jquery數(shù)據(jù)驗證插件(自制,簡單,練手)實例代碼
最近項目中js數(shù)據(jù)驗證比較多,為了統(tǒng)一風(fēng)格,移植復(fù)用,于是順手封裝了Jquery的插件2013-10-10jQuery在ie6下無法設(shè)置select選中的解決方法詳解
這篇文章主要介紹了jQuery在ie6下無法設(shè)置select選中的解決方法,結(jié)合實例分析了jQuery在ie6下無法設(shè)置select選中的原因與相關(guān)處理技巧,需要的朋友可以參考下2016-09-09