개별적으로 행에서 jQuery 함수 실행

Question

하나의 숫자 값이 잘못된 위치에 있지만 html 테이블의 위치를 ​​평소에 수정할 수없는 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;} 

Answer 1

문제는 추가 할 선택기에 두 개의 요소가 있기 때문에 요소가 중복되기 때문입니다. 이 문제를 해결하려면 tr 요소를 반복하고 개별적으로 td을 정렬해야합니다. 이 시도 :

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

Working example