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