Question

I am getting frustrated over a simple problem where I cannot find the issue:

I want to filter rows from a table by looking for any cells having been marked as “filtered” because of different criteria. So a final row filtering kind of “selects” the filtered cells to decide if the containing row is to be filtered.

Here is the simplyfied example:

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');

I prepared a fiddler for this:
http://jsfiddle.net/dtsZX/3/

I would expect rows 2 and 3 to get the class “filtered” added, thus being hidden.
However that does not work.
What is wrong with the jquery command ?

Answer 1

You want :has:

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

The trs themselves can never match td! Instead, you want to filter trs that have a td as their descendant.