使用javascript重组DOM元素

时间:2016-08-22 18:46:28

标签: javascript jquery sorting dom

我对此感到很沮丧。我想重新组织每个<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()方法之外。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

试试这个

$('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));
    });