Javascript jQuery：选择tr，使所有td动态匹配筛选条件

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

我需要找到所有

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>

但是，我希望动态应用过滤器。如何插入第三个

功能

我不想走
if-else
或
开关盒
的路，如果没有它们也可以的话。
你可以试试这个

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


$（文档）.ready（函数（）{
var结果=过滤器（[“.philips”、“.h4”]）；
警报（结果）；
var结果_2=过滤器（[“.philips”]）；
警报（结果2）；
});
函数过滤器（参数）{
var select=“tr”；
对于（变量i=0；i
您应该将$.has（）包装到一个单独的函数中（我刚刚使用了jquery的easy extensions支持），该函数将通过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);    
  }
});

我为您准备了一个小的过滤器供您摆弄：）
您可以将过滤器作为字符串提供：

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 ~ .bulb";
// returns ["4"]

如果需要一个过滤器数组，则迭代该数组并将过滤器字符串传递给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]'+")');
}

var过滤器=['PHILIPS'，'H4'，'Bulb']
var结果=$（'tr'）；
对于（变量i=0；i

当然可以根据您的需要进行编辑，但通过这种方式，您可以获取用户输入，将其编译到所需的数组中，然后迭代数组中的任何内容以过滤结果。
如果您在链中取出或添加.nthFilter调用，您可以轻松地对其进行测试，实际上这很有趣：）
var filter = ".philips ~ .h4 ~ .bulb";
// returns ["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]'+")');
}