单独在一行上运行 jQuery 函数答案

【问题标题】：Running a jQuery function on a row individually单独在一行上运行 jQuery 函数
【发布时间】：2016-12-07 22:52:22
【问题描述】：

我正在尝试重新排序一个 html 表格，其中一个数值在错误的位置，但它的位置不能按常规修改。

我已经运行了这个脚本来尝试重新排序 td，但是我遇到了大小重新排序正常的问题，但是我们正在将两行复制到一个上，例如大小将变为 8,8 ,10,10,12,12 等

我尝试过运行各种不同的 each 循环，但没有成功。谁能给我一个提示吗？

下面是表格格式，下面是我用来尝试重新排序的代码，因为它不适合我，所以取出 for each 循环。

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

【问题讨论】：

您是否尝试过使用 .each() 查看 th 元素并将值存储在数组中，然后对数组进行排序并循环该数组以添加回来？

标签： jquery foreach html-table

【解决方案1】：

问题是因为您附加到的选择器中有两个元素，因此元素是重复的。要解决此问题，您应该遍历 tr 元素并在其中单独对 td 进行排序。试试这个：

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

Working example

【讨论】：

谢谢罗里！我知道这会很简单。