Question

I have a structure that looks like this:

<div class="project_group">
    <table>
        <tr style="display:none">
            <td>...</td>
        </tr>
        <tr style="display:none">
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
        </tr>
    </table>
</div>

I have many different project_group divs in the page. Now, I want to iterate over each of these divs and get a count of the visible trs. If the count is 0, then I want to hide the whole div.

$('div.project_group').each(function(index){
    if ($(this)[index].filter('table tr:visible').length > 0)
    {
        $(this)[index].show();
    }
    else
    {
        $(this)[index].hide();
    }
})

The error message I get:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'filter'

Answer 1

Use the find()^[docs] method if you don’t have nested tables.

$(this).toggle( $(this).find('tr:visible').length );

…and I used the toggle()^[docs] method to show or hide based on whether or not any matches were found. 0 means hide, greater than 0 means show.