从n到n行的jquery循环表

Question

我有一张如下表：

<table>
  <tr class='group'>
    <td>Group 1 </td>
  </tr>
  <tr>
    <td> Group 1 item 1</td>
  </tr>
  <tr>
    <td> Group 1 item 2</td>
  </tr>
  <tr>
    <td> Group 1 item 3</td>
  </tr>
  <tr class='group'>
    <td> group 2</td>
  </tr>
  <tr>
    <td> group 2 item 1</td>
  </tr>
  <tr class='group'>
    <td> group 3</td>
  </tr>
  <tr class='group'>
    <td> group 4</td>
  </tr>
  <tr class='group'>
    <td> group 5</td>
  </tr>
  <tr>
    <td> group 5 item 1</td>
  </tr>
  <tr>
    <td> group 5 item 2</td>
  </tr>
</table>

每当我点击任何一行时，我都会为每一行添加一个类（例如选择）。如果我单击具有名为 group 的类的任何行，那么我想向该组中的所有其他行（如果有）添加/删除一个类

例如如果我单击具有名为 group 的类的第一行，那么我应该在第 2,3 和 4 行添加另一个类，它们属于第 1 行（第 1 组）。

从当前行开始循环，直到再次找到组类（例如第 5 行）

我可以从第 n 行循环到第 n 行吗？

Answer 1

您可以使用nextUntil() 方法选择下一个元素，直到到达下一个tr.group

看这里>nextUntil()

您还需要获取groupIndex，以便您可以将相应的类添加到选定的tr

当然，在单击其他元素时添加/删除选择和 group1、2、3、4、5 类。我添加了一些颜色（您可以在 css 中看到它们）作为示例目的

$("tr").click(function() {
  var groupIndex = $(this).closest('table').find('.group').index(this) + 1
  $(".selection").removeClass("selection")

  $(this).addClass("selection") //for example
  if ($(this).hasClass("group")) {
    $(this).siblings().not(".group").removeClass()
    $(this).nextUntil(".group").addClass("group" + groupIndex + "")
  }
});

.group1 {
  color: red;
}

.group2 {
  color: blue;
}

.group5 {
  color: yellow;
}

.selection {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class='group'>
    <td>Group 1 </td>
  </tr>
  <tr>
    <td> Group 1 item 1</td>
  </tr>
  <tr>
    <td> Group 1 item 2</td>
  </tr>
  <tr>
    <td> Group 1 item 3</td>
  </tr>
  <tr class='group'>
    <td> group 2</td>
  </tr>
  <tr>
    <td> group 2 item 1</td>
  </tr>
  <tr class='group'>
    <td> group 3</td>
  </tr>
  <tr class='group'>
    <td> group 4</td>
  </tr>
  <tr class='group'>
    <td> group 5</td>
  </tr>
  <tr>
    <td> group 5 item 1</td>
  </tr>
  <tr>
    <td> group 5 item 2</td>
  </tr>
</table>

Answer 2

使用JQuery的nextUntil()函数改变子组元素的类别。

$(".group").on("click",function(e){
	
  $(this).siblings(".group").removeClass("selected-header")
  $(this).addClass("selected-header")

  $(this).siblings().not(".group").removeClass("selected")
  $(this).nextUntil(".group").addClass("selected")
})

.selected-header{
  color : green
}

.selected{
  color : blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class='group'> <td>Group 1 </td> </tr>
<tr> <td> Group 1 item 1</td> </tr>
<tr> <td> Group 1 item 2</td> </tr>
<tr> <td> Group 1 item 3</td> </tr>
<tr class='group'> <td> group 2</td> </tr>
<tr> <td> group 2 item 1</td> </tr>
<tr class='group'> <td> group 3</td> </tr>
<tr class='group'> <td> group 4</td> </tr>
<tr class='group'> <td> group 5</td> </tr>
<tr> <td> group 5 item 1</td> </tr>
<tr> <td> group 5 item 2</td> </tr>
</table>