Question

我对一个无法找到问题的简单问题感到沮丧：

我想通过查找因标准不同而被标记为“已过滤”的任何单元格来过滤表格中的行。因此，最后一行过滤类型“选择”过滤的单元格以确定是否要过滤包含的行。

这是一个简单的例子：

html：

<table>   <tbody>
    <tr class="">
        <td class=""><span>1-1</span></td>
        <td class=""><span>1-2</span></td>
        <td class=""><span>1-3</span></td>      
    </tr>
    <tr class="">
        <td class=""><span>2-1</span></td>
        <td class="filtered"><span>2-2</span></td>
        <td class="filtered"><span>2-3</span></td>      
    </tr>
    <tr class="">
        <td class=""><span>3-1</span></td>
        <td class="filtered"><span>3-2</span></td>
        <td class=""><span>3-3</span></td>      
    </tr>   </tbody> </table>

css：

table { margin: 20px; }
td { padding:4px; }
td span { background-color: silver; }
tr.filtered { display:none; }

js / jquery：

$('table tbody tr').filter('td.filtered').addClass('filtered');

我为此准备了一个小提琴手： http://jsfiddle.net/dtsZX/3/

我希望第2行和第3行能够添加“过滤”类，从而被隐藏。然而，这不起作用。 jquery命令有什么问题？

Answer 1

您想要:has：

$('table tbody tr:has(td.filtered)').addClass('filtered');

tr本身永远不会匹配td！相反，您希望过滤tr 作为其后代的<{1}} 。

Answer 2

如果要将“filtered”添加到tr：

$('table tbody tr').find("td.filtered").parent().addClass("filtered")

而不是：

$('table tbody tr').filter('td.filtered').addClass('filtered');

http://jsfiddle.net/dtsZX/7/

Answer 3

过滤方法不能以这种方式工作。请参阅the JQuery documentation。

过滤器实际返回上一个选择器中选择的项目，也与filter方法中的选择器匹配。

尝试使用此：$('table tbody tr td.filtered').parent().addClass('filtered');

或另一个回答者提到的:has选择器（如果使用jQuery 1.1.4或更高版本）。

jquery过滤器选择器不匹配

3 个答案: