0

スポーツイベントの結果を掲載しています。各イベントにはテーブル内に独自の行があり、一部のイベントには複数の結果があり、li アイテムとしてリストされています。ユーザーは結果をフィルタリングできる必要があるため、チェックボックスを使用してリストから結果を除外できます。これを行うには、クラス .gone をこれらの結果に追加して、display:none にします。ただし、結果を十分にフィルタリングすると、一部のイベントには目に見える結果がなくなります。その場合は、テーブル内の行全体を display:none にしたいと考えています。

基本的に、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 に答える