Запуск функции jQuery в строке по отдельности

Я пытаюсь переупорядочить таблицу html, где одно числовое значение находится в неправильном месте, но его положение не может быть изменено обычным образом.

Я запустил этот скрипт, чтобы попытаться переупорядочить td, однако я сталкиваюсь с проблемой, когда размеры переупорядочиваются ок, но мы получаем дублирование обеих строк на один, например, размер будет идти 8,8,10,10,12,12 и т. д.

Я пробовал запускать различные разные циклы, но безуспешно. Может ли кто-нибудь дать мне подсказку? пожалуйста.

Ниже приведен формат таблицы, а ниже-код, который я использовал, чтобы попытаться изменить порядок с помощью каждого цикла, поскольку он не работал для меня..

<div id="attributeInputs" class="attribute-inputs js-type-grid">
    <table class="js-grid">
    <thead>
        <tr>
            <th class="js-col1"></th> 
            <th class="js-col2" colspan="8"></th>
        </tr>
       </thead>
       <tbody><tr><th rowspan="1"></th>
       <th class="js-rowtitleX">10</th>
       <th class="js-rowtitleX">12</th>
       <th class="js-rowtitleX">14</th>
       <th class="js-rowtitleX">16</th>
       <th class="js-rowtitleX">18</th>
       <th class="js-rowtitleX">20</th>
       <th class="js-rowtitleX">22</th>
       <th class="js-rowtitleX">8</th>
      </tr>
    <tr>
    <th class="js-rowtitleY">Red</th>
   <td class="js-gridBlock js-In_stock" data-attvalue1="10" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="12" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="14" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="16" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="18" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="20" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="22" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="8" data-attvalue2="Red" <span class="status">In stock</span></td>

</tr>
<tr>
<th class="js-rowtitleY">Blue</th>
<td class="js-gridBlock js-In_stock" data-attvalue1="10" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="12" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="14" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="16" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="18" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="20" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="22" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="8" data-attvalue2="Blue" <span class="status">In stock</span></td>
</tr>
</tbody
</table>
</div>

$("#attributeInputs > table > tbody > tr > td").sort(sort_td).appendTo('#attributeInputs > table > tbody > tr:nth-child(n+2)');
    function sort_td(a, b){
                    return ($(b).data('attvalue1')) < ($(a).data('attvalue1')) ? 1 : -1;}
1 2
jquery html-table foreach

1 ответ:

Проблема заключается в том, что селектор, к которому вы добавляете, содержит два элемента, следовательно, элементы дублируются. Чтобы исправить это, вы должны перебирать элементы tr и сортировать td внутри них по отдельности. Попробуйте это: 

$("#attributeInputs > table > tbody > tr").each(function() {
    $(this).find('td').sort(sort_td).appendTo(this);
})

Рабочий пример

2