选择子元素 jQuery

Question

我有一个结构如下的表格：

<table>
  <tbody>
  for loop here
    <tr>
      <td>Item X Attribute 1</td>
      <td>Item X Attribute 2</td>
      <td><button name="test" onclick="display_variants()">Hide my kids</button></td>
    </tr>
    <tr>
      <tbody class="variants_info">
        <tr>
          <td>Item X Variant 1</td>
          <td>Item X Variant 2</td>
        </tr>
      </tbody>
    </tr>
endfor loop
  </tbody>
</table>

因此该结构重复 Y 次。

我正在尝试制作一个隐藏所选行的tbody.variants 的脚本。

到目前为止，我所拥有的是：

<script>
  function display_variant(){
    if($('.variants_info').is(":visible")){
        $('.variants_info').hide();
    }
    else{
        $('.variants_info').show();
    }
  }
</script>

但这会隐藏 ALL 行中的变体。

有没有办法选择特定行的孩子？另外我怎样才能从 tbody.variants 隐藏开始？ （从我访问页面时开始）。

编辑：目前正在密切关注：

更新： 我已经设法将结构更改为：

<table>
  for loop
    <tbody>
      <tr>
        <td>image for el 1</td>
        <td>attr for el 1</td>
        <td><button type='button' name='test'>Click Me</button></td>
      </tr>
      for loop
        <tr class='variants_info'>
          <td>variant1 for el 1</td>
          <td>variant2 for el 1</td>
        </tr>
      endfor
    </tbody>
  endfor
</table>

更新 2： 实际代码是这个：

<table class="pure-table pure-table-bordered">
  <tbody>
  {% for product in collection.products %}
  {% if product.available %}

    <tr class="{% cycle 'pure-table-odd', '' %}">
      <td>
        <img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
      </td>
      <td>{{ product.title }}</td>
      <td style="text-align:right">
        <button type="button" name="click_me">Click Me</button>
      </td>
      </tr>
      {% for variant in product.variants %}
    <tr>
      <td>{{variant.title}}</td>
      <td>{{variant.price | money }}</td>
    </tr>
    {% endfor %}       
        {% endif %}
        {% endfor %}
    </tbody>
</table>

<script>
  $("td button").click(function(){
    $(this).closest('tr').next().toggle();
  })
</script>

我仍然无法让 JS 工作.. =/ 当前仅隐藏第一个变体（而不是单击按钮的所有变体）

Answer 1

我建议用类名标记包含产品的行，例如“产品”，像这样：

<tr class="product {% cycle 'pure-table-odd', '' %}">
  <td>
    <img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" 
         alt="{{ product.featured_image.alt | escape }}" />
  </td>
  <td>{{ product.title }}</td>
  <td style="text-align:right">
    <button type="button" name="click_me">Click Me</button>
  </td>
</tr>

您将不将该类添加到具有变体的行中。

然后在您的 JavaScript 中使用 nextUntil 方法匹配所有下一个变体行（没有“产品”类），直到但不包括下一个 product 行，并应用toggle() 方法对所有这些：

$("td button").click(function(){
    $(this).closest('tr').nextUntil('.product').toggle();
});

替代结构1

您可以创建嵌套表，而不是单个表，为每个产品创建一个包含变体的表。它看起来有点像这样：

<table class="pure-table pure-table-bordered">
  <tbody>
  {% for product in collection.products %}
  {% if product.available %}

    <tr class="{% cycle 'pure-table-odd', '' %}">
      <td>
        <img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" 
             alt="{{ product.featured_image.alt | escape }}" />
      </td>
      <td>{{ product.title }}</td>
      <td style="text-align:right">
        <button type="button" name="click_me">Click Me</button>
      </td>
    </tr>
    <tr>
        <table class="some other class specific for variants">
          <tbody> 
            {% for variant in product.variants %}
            <tr>
              <td>{{variant.title}}</td>
              <td>{{variant.price | money }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </tr>
  {% endif %}
  {% endfor %}
  </tbody>
</table>

这有优点也有缺点。主要缺点是这些子表的列与主表中的列不对齐。但这取决于你想要什么......

然后，JavaScript 代码必须与您最初拥有的一样：

$("td button").click(function(){
    $(this).closest('tr').next().toggle();
});

替代结构2

您还可以用tbody 标记包装每个“部分”（由一个产品行和属于它的变体行组成）。虽然不常见，但正如MDN 所述，这是允许的：

请注意，与 <thead>、<tfoot> 和 <caption> 元素不同的是，允许多个 <tbody> 元素（如果连续），允许将长表中的数据行划分为不同的部分，每个部分根据需要单独格式化。

这与原始 HTML 不同，在原始 HTML 中，tbody 元素是 tr 元素的子元素，这是无效的 HTML。

看起来像这样：

<table class="pure-table pure-table-bordered">
  {% for product in collection.products %}
  {% if product.available %}

  <tbody>
    <tr class="{% cycle 'pure-table-odd', '' %}">
      <td>
        <img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" 
             alt="{{ product.featured_image.alt | escape }}" />
      </td>
      <td>{{ product.title }}</td>
      <td style="text-align:right">
        <button type="button" name="click_me">Click Me</button>
      </td>
    </tr>
    {% for variant in product.variants %}
    <tr>
      <td>{{variant.title}}</td>
      <td>{{variant.price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>
  {% endif %}
  {% endfor %}
</table>

然后您可以使用nextAll() 方法隐藏变体行，因为它们由下一个产品行的tbody 包装器分隔：

$("td button").click(function(){
    $(this).closest('tr').nextAll().toggle();
});

最初隐藏变体行

如果您希望首先隐藏所有变体，则将以下属性添加到 HTML 代码中的这些行：

<tr style="display:hidden">

您当然不会对产品行执行此操作。此外，您可能希望为此定义一个 CSS 类（例如 tr.hidden { display:hidden; } 而不是使用 style。

jQuery的toggle()方法在显示时会覆盖这个style，在隐藏时会再次恢复。

Answer 2

您的HTML 无效，因此您可以更改它，然后使用此DEMO

$("td button").click(function() {
  $(this).closest('tr').next().toggle();
})

Answer 3

试试这个：-

$("td button").click(function() {
  $(this).closest('tr').nextUntil("tbody").toggle();
});

jsfiddle 演示链接是：- https://jsfiddle.net/Lg0wyt9u/776/