TIPS-jQuery.filter的條件化執行效果

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()做另一項比對，全部的邏輯串成一列就搞定，很酷吧!