jquery 中next與siblings區別

 

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);