jQuery选择从一个类到另一个类的元素。一切都在同一水平上 Title 1

Question

我有以下表结构：

…
<tr class="title"><td>Title 1</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="title"><td>Title 2</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="title"><td>Title 3</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
<tr class="product"><td>Product</td></tr>
…

当我点击标题类时，我想用类产品定位元素，直到下一个标题类。

像这样的东西：

$(".title").click(function() {

    // get all product classes until the next title
    var target = $(this).[INSERT CODE HERE]

    $(this).toggleClass('show_hide');

    // toggle the content
    $(target).slideToggle("slow");
});

因为它都在同一张桌子里，我不能用孩子。

有任何想法吗？

Answer 1

您可以使用.nextUntil('.title')来定位所有.product行，例如：

$(".title").click(function() {
   $(this).nextUntil('.title').toggle()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="title">
    <td>Title 1</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="title">
    <td>Title 2</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="title">
    <td>Title 3</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
  <tr class="product">
    <td>Product</td>
  </tr>
</table>

Answer 2

$(this).nextUntil('.title').slideToggle("slow");