使用javascript重新組織DOM元素

Question

我對此有一段時間了。我想重新組織這些<span>內的每個<td class="ref_type_block">元素，按屬性sort_order排序。

<tr> 
    <td class="time_col">11am</td> 
    <td class="ref_type_block"> 
     <span class="ref_type_1" sort_order="0">█</span> 
     <span class="ref_type_2" sort_order="1">█</span> 
     <span class="ref_type_3" sort_order="3">█</span> 
     <span class="ref_type_13" sort_order="2">█</span> 
    </td> 
</tr> 
<tr> 
    <td class="time_col">12pm</td> 
    <td class="ref_type_block"> 
     <span class="ref_type_1" sort_order="0">█</span> 
     <span class="ref_type_2" sort_order="1">█</span> 
     <span class="ref_type_3" sort_order="3">█</span> 
     <span class="ref_type_13" sort_order="2">█</span> 
     <span class="ref_type_13" sort_order="2">█</span> 
     <span class="ref_type_13" sort_order="2">█</span> 
    </td> 
</tr> 

我有以下的javascript函數這感覺很接近，我可以登錄的東西來安慰我展示它的選擇合適的零件，並.sort()被解僱，但它不是改寫爲<td>元素。

function sortBlocks() { 

    var tds = $('.ref_type_block'); 
    for (var i = tds.length - 1; i >= 0; i--) { 
     td = tds[i] 
     console.log($(td).find('span').length); 
     if ($(td).find('span').length > 0) { 
      console.log("firing on:",td); 
      $(td).find('span').sort(function (a, b) {    
       return +a.dataset.sort_order - +b.dataset.sort_order; 
      }).appendTo($(td)); 
     } 
    }; 
} 

我已經從JavaScript/jQuery的遠了一點，怕這件事情非常簡單，特別是圍繞.appendTo()方法。任何幫助，將不勝感激。

Answer 1

嘗試這個

$('table').find('.ref_type_block').each(function(i,k){ 
    $(k).find('span').sort(function (a, b) { 
     var first =parseInt($(a).attr('sort_order')); 
     var second =parseInt($(b).attr('sort_order')); 
     return (first < second) ? -1 : (first > second) ? 1 : 0; 
    }).appendTo($(k)); 
}); 

或

$('table').find('.ref_type_block').each(function(i,k){ 
     $(k).find('span').sort(function (a, b) { 
      return ($(b).attr('sort_order')) < ($(a).attr('sort_order')) ? 1 : -1; 
     }).appendTo($(k)); 
    });