Question

我有这段代码

<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行）

Answer 1

即使以下解决方案应该达到预期效果，我强烈建议您将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);
});

Answer 2

HTML必须没有相同的ID，最好为您的用例使用类。

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

一样循环它们

＆＃13;

$(function(){
  $('.groupItem-73632').each(function() {
      console.log('grp');
      $(this).find('td').each(function(){
          console.log($(this).text());
      })
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    
      <tr class="groupItem-12863">
        <td>10</td>
        <td class="selCost">34</td>
      </tr>
      <tr class="groupItem-12863">
        <td>20</td>
        <td class="selCost">5</td>
      </tr>
      <tr>
        <td>14</td>
        <td class="selCost">23</td>
      </tr>
      <tr class="groupItem-73632">
        <td>28</td>
        <td class="selCost">8</td>
      </tr>
      <tr class="groupItem-73632">
        <td>54</td>
        <td class="selCost">55</td>
      </tr>
      <tr class="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>

＆＃13;

Answer 3

我不得不做一些黑客攻击，我知道HTML并不理想，我们不能拥有相同的ID。但有时重构旧代码超出了范围。这是解决方案，不理想，但有效：

＆＃13;

$('tr[id^=groupItem-]').each(function(){
	var s = 0 ;
  var text = $(this).attr('id');
  var arr = text.split('-');
  var elem = 'tr[id^=groupItem-' + arr[1] + ']';
    $(elem).find("td.selCost").each(function(){
			s += parseFloat($(this).text());
    });
console.log($(this).attr('id')+ '=='+s);
});

＆＃13;

Answer 4

您可以使用tr[id^=groupItem]之类的通配符选择器。查看Attribute Selector了解更多示例。

$(function() {
  $('tr[id^=groupItem]').css({
    'background-color': 'red'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

按ID对选择器进行分组

4 个答案: