使用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)); 
    });