如何使用自定义数据属性对div排序 实现按钮切换容器时排序正确

修复后的完整实现代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="1">
    ONE
</div>
<div id="main"></div>
<!-- 自定义属性统一加data-前缀，符合HTML规范也方便jQuery读取 -->
<div class="3 option" data-order="3">Three</div>
<div class="2 option" data-order="2">TWO</div>
<div class="4 option" data-order="4">four</div>
<div id="button">
    press here
</div>
<div class="container">
    <div class="5 option"> five</div>
</div>
<script>
    var pressed = 0;
    // 提前缓存需要移动的option元素（排除container里的5号元素）
    const moveOptions = $('.option').not('.container .option');
    const container = $('.container');
    const main = $('#main');

    $('#button').on('click', () => {
        ButtonPressed();
        pressed++;
    })

    function ButtonPressed(){
        if(pressed % 2 == 0){
            // 把要移动的元素转成数组，按data-order数值升序排序
            const sorted = moveOptions.sort((a,b) => {
                return $(a).data('order') - $(b).data('order');
            });
            // 把排序后的元素追加到container
            container.append(sorted);
        }else{
            // 把对应元素放回#main容器
            main.append(moveOptions);
        }
    }
</script>

主要修改点 #

• 自定义属性增加data-前缀，原代码直接写order不符合HTML规范，jQuery的data()方法无法正确读取属性值
• 修正排序逻辑：将需要排序的元素转为数组后调用sort()方法，按data-order的数值差做升序排序，原代码的each循环不具备排序能力
• 拆分需要移动的元素和container内固定的5号元素，避免误操作容器内原有内容
• 修正切换逻辑：第二次点击只移动对应元素回#main，而非将整个container容器移入#main
• 优化选择器获取逻辑，避免使用动态DOM集合getElementsByClassName导致的操作异常

内容的提问来源于stack exchange，提问作者Renoissance