jQuery select 个元素从一个 class 到另一个 class。都在同一水平

Question

我有以下 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>
…

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

像这样：

$(".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");
});

因为它们都在同一个 table 我不能使用 children。

有什么想法吗？

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");

jQuery select 个元素从一个 class 到另一个 class。都在同一水平

jQuery select elements from one class to another class. All on the same level

jquery

jquery-selectors