javascript – 选择子元素jQuery

我有一个这样的表格：

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

但是这隐藏了所有行中的变体.

有没有办法选择特定行的孩子？还可以从隐藏的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工作.. = /当前只是隐藏第一个变体(而不是所有的变体为点击的按钮)

解决方法

我建议标记包含具有类名称的产品的行,例如. “产品”,像这样：

<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所述：

Note that unlike the <thead>,<tfoot>,and <caption> elements however,multiple <tbody> elements are permitted (if consecutive),allowing the data-rows in long tables to be divided into different sections,each separately formatted as needed.

这与您的原始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;}而不是使用样式.

显示时,jQuery toggle()方法将覆盖此样式,并在隐藏时再次恢复.

javascript – 选择子元素jQuery

解决方法

猜你在找的jQuery相关文章