Javascript 按ID对选择器进行分组

我有这个密码

<table>
  <tr id="groupItem-12863">
    <td>10</td>
    <td class="selCost">34</td>
  </tr>
  <tr id="groupItem-12863">
    <td>20</td>
    <td class="selCost">5</td>
  </tr>
  <tr>
    <td>14</td>
    <td class="selCost">23</td>
  </tr>
  <tr id="groupItem-73632">
    <td>28</td>
    <td class="selCost">8</td>
  </tr>
  <tr id="groupItem-73632">
    <td>54</td>
    <td class="selCost">55</td>
  </tr>
  <tr id="groupItem-73632">
    <td>13</td>
    <td class="selCost">99</td>
  </tr>
  <tr>
    <td>18</td>
    <td class="selCost">55</td>
  </tr>
  <tr>
    <td>99</td>
    <td class="selCost">66</td>
  </tr>
</table>

---

我想要一个jquery选择器，在这里我可以在id组上循环并获取td cell的值。注意：tr id是动态生成的，每组id可以没有行或N行。例如，groupItem-12863有2行，groupItem-73632有3行。您可以使用通配符选择器，如tr[id^=groupItem]。查看更多示例

$function{ $'tr[id^=groupItem]'.css{ “背景色”：“红色” }; }; 10 34 20 5. 14 23 28 8. 54 55 13 99 18 55 99 66

---

即使下面的解决方案可以满足您的期望，我强烈建议您将id更改为另一个属性，一个自定义属性，比如group id或使用CSS类。顺便说一下：

$(function() {
  var groupedRows = {};
  $.each($('tr[id^=groupItem]'), function() {
     if (groupedRows[$(this).attr('id')]) {
         groupedRows[$(this).attr('id')].push($(this));
     } 
     else {
         groupedRows[$(this).attr('id')] = [$(this)];
     }
  });
  console.log(groupedRows);
});

---

HTML不能有相同的ID，最好为您的用例使用类

在此之后，您可以获得具有给定类的元素，并像

$function{ $'.groupItem-73632'.eachfunction{ console.log'grp'； $this.find'td'。每个函数{ console.log$this.text； } } } 10 34 20 5. 14 23 28 8. 54 55 13 99 18 55 99 66

---

我不得不做一些修改，我知道html并不理想，我们不能有相同的id。但有时重构旧代码超出了范围。这是一个解决方案，虽然不理想，但很有效：

$'tr[id^=groupItem-]'。每个函数{ var s=0； var text=$this.attr'id'； var arr=text.split'-'； var elem='tr[id^=groupItem-'+arr[1]+']； $elem.findtd.selCost.eachfunction{ s+=parseFloat$this.text； }; console.log$this.attr'id'+'='+s；

---

};理想情况下，HTML不应具有相同的ID。可以将同一个类用于多个标记，但ID应该是唯一的。如何使用自定义属性并实现所需功能？因此，当您的组覆盖多行时，您希望检索问题中的哪个td单元？如果您对行进行分组，则应为tbody元素分配唯一id，而不是为多个tr元素分配同一id。如果这个HTML不是你的，那就没什么可说的了。嗯，如果我想为每个组定制颜色呢？我可以取回整批货，我需要的是一种根据ID对它们进行分组的方法。