jQuery：选择所有 td 动态匹配过滤条件的 tr答案

【问题标题】：jQuery: select tr having all td matching the filter criteria dynamicallyjQuery：选择所有 td 动态匹配过滤条件的 tr
【发布时间】：2015-09-25 08:56:41
【问题描述】：

标题可能有点混乱，但这是我能想到的最好的。

我需要找到所有 tr 元素，其中包含与提供的过滤条件匹配的 td 元素。

这是我的示例，

<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] 传递为 'phillips'，则结果返回带有 id 的 tr

1
2 和
4

如果我通过第二个过滤器； filter[1] 为 'h4'，结果应过滤到

1 和
4

我试过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 的方式，如果没有他们的话。

【问题讨论】：

标签： javascript jquery html

【解决方案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>

【讨论】：

【解决方案2】：

如果您需要一个过滤器数组，请迭代该数组并将过滤器字符串传递给 has？

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

当然可以根据您的需要进行编辑，但是通过这种方式，您可以获取用户输入，将其编译到所需的数组中，然后迭代数组中的任何内容以过滤结果。

【讨论】：

【解决方案3】：

您应该将 $.has() 包装到一个单独的函数中（我刚刚使用了 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 供你摆弄:)

【讨论】：

如果你在链中取出或添加 .nthFilter 调用，你可以很容易地测试出来，这实际上很有趣:)

【解决方案4】：

您可以将过滤器作为字符串提供：

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"]

【讨论】：