jQuery：select tr具有所有td動態匹配篩選條件

Question

標題可能有點混淆，但這是我能想到的最好的。

我需要找到其中包含td元素匹配提供過濾條件的所有tr元素。

這是我的樣品，

<tr class="row" id="1"> 
    <td class="philips">PHILIPS</td> 
    <td class="h4">H4</td> 
    <td class="lamp">Lamp<td> 
</tr> 
<tr class="row" id="2"> 
    <td class="philips">PHILIPS</td> 
    <td class="h5">H5</td> 
    <td class="bulb">Bulb<td> 
</tr> 
<tr class="row" id="3"> 
    <td class="neglin">NEGLIN</td> 
    <td class="w5w">W5W</td> 
    <td class="tube">Tube<td> 
</tr> 
<tr class="row" id="4"> 
    <td class="philips">PHILIPS</td> 
    <td class="h4">H4</td> 
    <td class="bulb">Bulb<td> 
</tr> 
<tr class="row" id="5"> 
    <td class="osram">OSRAM</td> 
    <td class="hb3">HB3</td> 
    <td class="tube">Tube<td> 
</tr> 
<tr class="row" id="6"> 
    <td class="neglin">NEGLIN</td> 
    <td class="w5w">W5W</td> 
    <td class="lamp">Lamp<td> 
</tr> 

如果我通過filter[0]爲 '十字'，具有ID的結果返回tr

• 2和

那麼如果我通過第二個過濾器; filter[1]爲 'H4'，結果應被過濾至

• 1和

我試圖this question。

其中有this answer。

$('tr') 
.has('td:nth-child(1):contains("Audi")') 
.has('td:nth-child(2):contains("red")') 
.doSomeThing(); 

但是，我希望我的過濾器能夠動態應用。我將如何插入第三個has函數？

我不想去if-else或switch-case的方式，如果這是可能的出來他們。

Answer 1

你可以試試這個。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var result = filter([".philips", ".h4"]); 
     alert(result); 
     var result_2 = filter([".philips"]); 
     alert(result_2); 
    }); 

    function filter(params) { 
     var select = "tr"; 

     for (var i = 0; i < params.length; i++) { 
      select += ":has(" + params[i] + ")"; 
     } 

     return $(select).map(
       function() { 
        return $(this).attr('id'); 
       } 
     ).get(); 
    } 
</script> 

Answer 2

你應該換行$。先後（）到一個單獨的功能（我只是使用jQuery的易擴展支持），這將暴露用法通過JavaScript語法的複合函數鏈...

$(document).ready(function() { 

     $('tr') 
     .nthFilter('td:nth-child(1):contains("PHILIPS")') 
     .nthFilter('td:nth-child(2):contains("H4")') 
     .nthFilter('td:nth-child(3):contains("Bulb")') 
     .css("background-color", "red"); 
}); 

jQuery.fn.extend({ 
    nthFilter: function(filter) { 
    return $(this).has(filter);  
    } 
}); 

我已經把一個小jsfiddle您與:)

Answer 3

撥弄你可以提供你的過濾器的字符串：

var filter = ".philips, .h4"; 

$("tr").has("td").has(filter).map(function() { return this.id; }); 
// returns ["1", "2", "4"] 

，如果你想要的元素則顯然離開地圖關：

$("tr").has("td").has(filter); 
    // returns array of <tr> 

編輯：剛纔注意到你想遞歸濾波，從而改變使用兄弟選擇~過濾器。

var filter = ".philips ~ .h4"; 
// returns ["1", "4"] 

所以，如果你想有一個第三級則剛：

var filter = ".philips ~ .h4 ~ .bulb"; 
// returns ["4"] 

Answer 4

如果你有需要的濾光器陣列，遍歷數組，並通過過濾字符串到了？

var filters = ['PHILIPS', 'H4', 'Bulb'] 
var result = $('tr'); 
for(var i = 0; i < filters.length; i++){ 
    var nchild = i+1; 
    result = result.has('td:nth-child('+nchild+'):contains("+'filters[i]'+")'); 
} 

編輯您當然需要，但這樣一來，你可以採取用戶輸入，編譯成所需要的數組，然後遍歷無論是陣列過濾下來的結果英寸