0

我正在列出一项体育赛事的结果。每个事件在表中都有自己的行，有些有多个结果，列为 li 项目。人们需要能够过滤结果，因此通过使用复选框，他们可以从列表中消除结果。我通过将类 .gone 添加到这些结果中来做到这一点，这使它们显示：无。但是，如果他们对结果进行了足够的过滤，某些事件将不再有任何可见的结果。如果出现这种情况，我希望表中的完整行显示为：无。

基本上，如果 tr 中的所有 li 都具有 .gone 类，则父 tr 也应该被分配 .gone 类。

我对此有点菜鸟，我在这个网站上尝试了很多不同的例子，但我显然遗漏了一些东西。

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

那么，我尝试了什么？很多事情，但这是我最后一次尝试：

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

我也为这段代码道歉。这是我在这里的第一篇文章，我试图整理代码格式。

任何帮助是极大的赞赏。这是我正在处理的页面......如果它有帮助的话： http ://dev-public.usagym.org/2013/?cat=7

更新：正如一位响应者指出的那样，我可以检查事件的 li 是否隐藏，如果是，隐藏事件标题。但是，我最初想隐藏 ul 直到有人点击事件标题。我在页面上没有该代码，但我现在有了。

4

1 回答 1

1

我认为您在比较集合的长度方面有正确的想法。

遍历每个tr并分别应用比较：

$('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');
    }
});

我还让循环跳过检查它是否没有任何子li项，因为它也会循环遍历您的标题行。

于 2013-03-05T16:54:17.727 回答