TIPS-jQuery.filter的條件化執行效果
8 |
jQuery.filter()可以對現有結果集合再進行一次篩選,只保留符合條件者。在某些情境下,我們也可以借用它達到條件化執行的效果。
讓我們看一個實例,有個Table:
<table border="1">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
我們希望第一個<td>填入0-4,第二個<td>則第一列寫First,最後一列寫Last,其餘留白。依直覺,程式可以寫成這個樣子:
$("table tr").each(function(i) {
var tr = $(this);
tr.find("td:first").text(i);
var allTr = tr.parent().children();
if (allTr.index(tr) == 0)
tr.find("td:eq(1)").text("First");
if (allTr.index(tr) == allTr.length - 1)
tr.find("td:eq(1)").text("Last");
});
已經夠短了吧?
不,還有簡化空間,祭出.filter()+:first-child/:last-child,程式碼還可以再精簡:
$("table tr").each(function(i) {
$(this).find("td:first").text(i).end()
.filter(":last-child").find("td:eq(1)").text("Last*").end().end()
.filter(":first-child").find("td:eq(1)").text("First*");
});
如上例所示,接在filter()後方的find()/text() Method只有在找到相符結果時會被執行;但即使無符合結果,後面的Method仍會一一被呼叫,因此我們可以用end()回到先前的結果集合再加上第二個filter()做另一項比對,全部的邏輯串成一列就搞定,很酷吧!
Comments
# by Ammon
這樣也可以 $("table tr").filter('tr:last td:eq(1)').text('Last*').end() .filter('tr:first td:eq(1)').text('First*').end() .find('td:first').each(function(i) { $(this).text(i) });
# by VampireNeo
利害 @@"
# by KINK
小的想了快一整天...Ammon大,謝囉!
# by Jeffrey
to Ammon, 您的寫法比較直覺,感謝補充。 該範例程式原本用在td click中判別該tr是否為第一或最後一列,為了簡化說明做了改寫,看來改得不是很恰當。:P
# by KINK
J大....好!小弟想問個關於選擇器的問題,怎麼會越看越不熟@@!問題是這樣....以下 <div> <input type="checkbox" name="appetizers"value="imperial"/>Fried Imperial rolls (2) <input type="text" name="imperial.quantity"disabled="disabled" value="1"/>$<span></span> <div> <input type="radio" name="imperial.option"value="pork" checked="checked"/>Pork </div> </div> 書上是這樣用$('div',$(this).parents('div:first')),可以選到第2層的DIV,但小弟實在不太懂,要怎麼解讀呢?
# by Jeffrey
to KINK, 先拆解成 jQuery( expression, context ),意思是指在$(this).parents("div:first")中找"div"這個子元素。你提供的資料中沒有說明,我猜這段應該是寫在checkbox的click事件上吧? (有沒有猜錯?) $(this).parents("div:first")可以找到包住checkbox的div,再依expression在其中去找子/孫元素div,就會找到包住radio的div,是否就是你說的第二層div? 在jQuery 1.3+,parents("div:first")可以簡寫成closest("div"),效果相同。
# by KINK
感謝J大的解說,剛剛也去對照官網上的說明,原來context是這個意思阿!
# by 陳志明
這編文章好久了!既然經過就留下一點意見 上面簡短寫法固然簡單,但文意過一段時間(如果久久未使用JQ時),回眸還真的想不出來,所以有時寫程式最好重點在可讀性方面,多幾段行也沒甚麼損失.