Kent Kent - 2 years ago 72
jQuery Question

Hide parent tr when all children li have same class

I am listing results for a sporting event. Each event has it's own row in a table, some with multiple results, listed as li items. People need to be able to filter the results, so by using checkboxes, they can eliminate results from the list. I do this by adding the class .gone to those results, which makes them display:none. However, if they filter the results enough, some events no longer have any visible results. If that becomes the case, I want that complete row in the table to be display:none.

Basically, if all li within a tr have the class .gone, the parent tr should also be assigned the class of .gone.

I'm a bit of a noob on this and I've tried so many different example on this site, but I'm clearly missing something.

Here is the HTML:

<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td valign="top" width="75px"><div id="tableHeader">Date</div></td>
<td valign="top"><div id="tableHeader">Event</div></td>
<td valign="top"><div id="tableHeader">Location</div></td>
</tr>

<tr id="section">

<td valign="top">
<div id="postmeta">3/2/2013</div>
</td>

<td valign="top">
<div class="posttitle" id="post-103">AT&#038;T American Cup</div>
<ul>
<li class="Men"><a href="http://usagym.org/PDFs/Results/m_13ac_final.pdf" target="_new">Men's All-Around</a></li>
<li class="Women"><a href="http://usagym.org/PDFs/Results/w_13ac_final.pdf" target="_new">Women's All-Around</a></li>
</ul>
</td>

<td valign="top">Worcester, Mass.</td>

</tr>


<tr id="section">

<td valign="top">
<div id="postmeta">3/1/2013</div>
</td>

<td valign="top">
<div class="posttitle" id="post-106">Nastia Liukin Cup</div>
<ul>
<li class="Women"><a href="http://usagym.org/PDFs/Results/w_13nlc_final.pdf" target="_new">Final Results</a></li>
</ul>
</td>

<td valign="top">Worcester, Mass.</td>

</tr>




So then, what have I tried? Many things, but this was my last attempt:

if ($("#section ul li.gone").length == $("#section ul li").length) {
// all list items are selected
$('tr').addClass('gone');}


I also apologize for this code. This is my first post here and I've tried to rangle the code formatting.

Any help is greatly appreciated. Here is the page I'm working on... if it helps at all: http://dev-public.usagym.org/2013/?cat=7

UPDATE: As one responder pointed out, I could check to see if the event's li are hidden, and if so, hide the event title. However, I initally want to hide the ul until someone clicks on the event title. I did not have that code on the page, but I do now.

Answer Source

I think you have the right idea in comparing the lengths of the sets.

Loop through each tr and apply the comparisons separately:

$('tr').each(function() {
    var $this = $(this);
    var $lis = $this.find('li');

    if ($lis.length === 0) return;

    if ($lis.filter('.gone').length === $lis.length) {
        $this.addClass('gone');
    } else {
        $this.removeClass('gone');
    }
});

I've also made the loop skip the check if it doesn't have any li children, since it will also loop through your header row.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download