用javascript重新组织DOM元素

我在这里玩得很开心。我想在每个

中重新组织这些

元素，按照属性

排序顺序进行排序

<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/jquery一段时间了，我担心它非常简单，尤其是
.appendTo（）
方法。任何帮助都将不胜感激。
试试这个

$('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'）。查找（'.ref\u type\u block'）。每个（函数（i，k）{
$（k）.find（'span'）.sort（函数（a，b）{
var first=parseInt（$（a）.attr（'sort_order'）；
var second=parseInt（$（b）.attr（'sort_order'）；
返回（第一次<第二次）？-1：（第一次>第二次）？1:0；
})。附件（$（k））；
});

或

$（'table'）。查找（'.ref\u type\u block'）。每个（函数（i，k）{
$（k）.find（'span'）.sort（函数（a，b）{
返回（$（b）.attr（'sort_order'））<（$（a）.attr（'sort_order'））？1:-1；
})。附件（$（k））；
});
试试这个

$('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'）。查找（'.ref\u type\u block'）。每个（函数（i，k）{
$（k）.find（'span'）.sort（函数（a，b）{
var first=parseInt（$（a）.attr（'sort_order'）；
var second=parseInt（$（b）.attr（'sort_order'）；
返回（第一次<第二次）？-1：（第一次>第二次）？1:0；
})。附件（$（k））；
});

或

$（'table'）。查找（'.ref\u type\u block'）。每个（函数（i，k）{
$（k）.find（'span'）.sort（函数（a，b）{
返回（$（b）.attr（'sort_order'））<（$（a）.attr（'sort_order'））？1:-1；
})。附件（$（k））；
});
这里的区别可能是您需要属性为
data-sort\u order
才能通过
dataset
@jason-p访问它，您是对的。很遗憾，我把我心里所知道的都贴在了类似的帖子上，但不久之后我就无意中找到了答案。由于我不清楚的原因，我无法使用
a.dataset.sort\u order
，我不得不使用
a.getAttribute（'sort\u order'）
annn然后我看到了你的评论，你完全正确，就是这样。感谢您对细节的高度关注。很高兴我能帮忙。如果可能的话，我建议使用
data-*
属性，因为使用“自定义”属性会破坏验证。这里的区别可能是您需要属性为
data-sort\u order
才能通过
dataset
@jason-p访问它，您是对的。很遗憾，我把我心里所知道的都贴在了类似的帖子上，但不久之后我就无意中找到了答案。由于我不清楚的原因，我无法使用
a.dataset.sort\u order
，我不得不使用
a.getAttribute（'sort\u order'）
annn然后我看到了你的评论，你完全正确，就是这样。感谢您对细节的高度关注。很高兴我能帮忙。如果可能的话，我建议使用
data-*
属性，因为使用“自定义”属性会破坏验证。在将来，最好包括关于这篇文章中的代码如何/为什么回答这个问题的信息。这将有助于未来的读者。另请参阅。在将来，最好包含有关此帖子中的代码如何/为什么回答此问题的信息。这将有助于未来的读者。另见。
$('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));
    });