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

Posted 2021-04-13

我有以下表结构：

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

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

有任何想法吗？

答案

您可以使用.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>

另一答案

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

以上是关于jQuery选择从一个类到另一个类的元素。一切都在同一水平上 Title 1的主要内容，如果未能解决你的问题，请参考以下文章

创建从一个类到另一个类的变量

如何完成飞镖类从导航一个类到另一个类，如android Native Applications（完成上一课）？

从使用 jQuery 的代码中指定的元素中选择具有给定类的下一个元素

从嵌套类到包含类的 C# 成员访问 [重复]

如何使用jQuery将子元素从一个父元素移动到另一个父元素[重复]

悬停时，jQuery将元素从一个类淡化到另一个类