Eine jQuery-Funktion in einer Zeile einzeln ausführen

Question

Ich versuche, eine HTML-Tabelle neu zu ordnen, in der ein numerischer Wert an der falschen Stelle ist, aber seine Position kann nicht konventionell geändert werden.

Ich habe dieses Skript ausgeführt, um zu versuchen, die TDs neu zu bestellen, aber ich renne in das Problem, wo die Größen Ordnung neu ordnen, aber wir bekommen beide Duplizierung der Reihe auf eine zB würde die Größe gehen 8, 8,10,10,12,12 usw.

Ich habe versucht, verschiedene verschiedene Schleifen ohne Glück zu laufen. Könnte mir bitte jemand einen Hinweis geben?

unten ist das Tabellenformat und unten das ist der Code, den ich verwendet habe, um zu versuchen und wieder, um mit dem für jede genommen Schleife, wie es für mich war nicht funktioniert ..

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

Answer 1

Das Problem liegt daran, dass der Selektor, an den Sie anhängen, zwei Elemente enthält, daher werden die Elemente dupliziert. Um dies zu beheben, sollten Sie die tr Elemente durchlaufen und die td innerhalb dieser einzeln sortieren. Versuchen Sie folgendes:

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

Working example