jquery - jQueryこれは私のコードでは機能しません

Question

次のマークアップがあります。

<tbody>
        <tr>
            <td class="expand">Showroom area - New Display Zone</td>
            <td>300</td>
            <td>350</td>
            <td class="shortfall">50</td>
        </tr>
        <tr class="hidden">
            <td>Core Display</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>R8</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>Highlight Car</td>
            <td>1</td>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="expand">Showroom - Handover Bay</td>
            <td>300</td>
            <td>350</td>
            <td class="shortfall">50</td>
        </tr>
        <tr class="hidden">
            <td>Core Display</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>R8</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>Highlight Car</td>
            <td>1</td>
            <td>1</td>
            <td>0</td>
        </tr>

およびjQuery：

$(function () {

    $('td.expand').click(function () {

        $(this).parents().siblings('tr.hidden').toggle();
        $(this).toggleClass("active");
    });
});

このコードは、最初のtd.expandクラスに直接関連するため、最初の3つのtr.hiddenクラスを切り替えたいのですが、コードを実行すると、表示するすべてのtr.hiddenクラスが切り替わります。

誰かが私がここで間違っていることを見ることができますか？

Answer 1

基本的に、あなたが間違っているのは、jQueryにいくつかのtr.hidden要素だけを処理したいということではありません。parentsまた、ほぼ確実に必要な場所（単数形）で（複数形）を使用していますparent。

nextUntil条件が一致するまで要素を収集するために使用できます。この場合、nextUntilではない行が見つかるまで、を使用して行を収集できますtr.hidden。それで：

$(this).parent().nextUntil(':not(tr.hidden)').toggle();

実例| ソース

---

または、これが私の推奨される解決策です。構造を多少変更しtbody、これらの展開/折りたたみグループごとに1つずつ、複数の要素を使用することを検討してください。

<tbody>
  <tr>
    <td class="expand">...</td>
    ...
  </tr>
  <tr class="hidden">
  ...
  </tr>
  ...
</tbody>
<tbody>
  <tr>
    <td class="expand">...</td>
    ...
  </tr>
  <tr class="hidden">
  ...
  </tr>
  ...
</tbody>

それは物事をかなり単純化します：

$(this).closest('tbody').find('tr.hidden').toggle();

実例| ソース

Answer 2

使いたいが使いたくparent()ないparents()