Группировка селекторов по ID

Question

Группировка селекторов по ID

0

Даже если следующее решение должно делать то, что вы ожидаете, я настоятельно рекомендую вам изменить идентификатор на другой атрибут, настраиваемый 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);
});

0

У HTML не должно быть одинаковых идентификаторов, лучше использовать класс для вашего прецедента.

После этого вы можете получить элементы с заданным классом и петлями над ними, как

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

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

0 принят

Я должен был немного взломать, я знаю, что html не был идеальным, мы не можем иметь одинаковые идентификаторы. Но иногда рефакторинг старого кода выходит за рамки. Вот решение, а не идеальное, но работает:

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

-2 down голос

Вы можете использовать подстановочный знак tr[id^=groupItem]. Проверьте примерный селектор атрибутов .

$(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>

JavaScript, JQuery,

javascript,jquery,

-2

Ответов: 4