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]'+")'); 
} 

编辑您当然需要，但这样一来，你可以采取用户输入，编译成所需要的数组，然后遍历无论是阵列过滤下来的结果英寸