如何使用JavaScript或jQuery基于data属性对比两个有序列表？

嘿，我来帮你搞定这个双列表对比验证的需求！其实思路很简单：先把静态列表的data-compare顺序存下来当参照，用户调整完可排序列表后，点击验证按钮时再获取当前排序的data-compare顺序，最后对比两者是否完全一致就行。我给你写个完整的可运行示例，包含HTML、jQuery（或原生JS）的实现，直接就能用～

完整实现方案 #

1. 完善后的HTML结构 #

先给两个列表加类名区分，再添个验证按钮和结果提示区：

<!-- 静态参照列表 -->
<ul class="reference-list">
  <li data-compare="1">Bananas</li>
  <li data-compare="2">tomatoes</li>
  <li data-compare="3">carrots</li>
  <li data-compare="4">dates</li>
</ul>

<!-- 可排序列表（用jQuery UI的sortable实现拖拽排序，省心又好用） -->
<ul class="sortable-list">
  <li data-compare="1">Tree</li>
  <li data-compare="4">Palm tree</li>
  <li data-compare="2">Bush</li>
  <li data-compare="3">In the ground</li>
</ul>

<button id="verify-btn">验证排序是否正确</button>
<div id="result-message"></div>

2. jQuery实现（含拖拽排序+验证逻辑） #

先引入jQuery和jQuery UI的脚本（可以用CDN，也可以本地引入），然后写核心逻辑：

$(document).ready(function() {
  // 初始化可排序列表的拖拽功能，加个占位样式更直观
  $('.sortable-list').sortable({
    placeholder: 'ui-state-highlight'
  }).disableSelection();

  // 提前获取静态列表的参照顺序，避免每次点击都重复查询DOM
  const referenceOrder = $('.reference-list li').map(function() {
    return $(this).data('compare');
  }).get();

  // 验证按钮点击事件
  $('#verify-btn').click(function() {
    // 获取当前可排序列表的顺序
    const currentSortOrder = $('.sortable-list li').map(function() {
      return $(this).data('compare');
    }).get();

    // 对比两个顺序是否一致（循环逐个对比比转字符串更高效，适合列表项多的场景）
    let isMatch = true;
    for (let i = 0; i < referenceOrder.length; i++) {
      if (referenceOrder[i] !== currentSortOrder[i]) {
        isMatch = false;
        break;
      }
    }

    // 显示验证结果
    const resultMsg = $('#result-message');
    if (isMatch) {
      resultMsg.text('排序正确！🎉').css('color', 'green');
    } else {
      resultMsg.text('排序不对哦，再调整一下吧～').css('color', 'red');
    }
  });
});

3. 可选：原生JavaScript实现（不用jQuery） #

如果不想依赖jQuery，也可以用原生JS写验证逻辑，排序功能可以用Sortable.js这类轻量库实现：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化可排序（这里假设你已经用Sortable.js或自己实现了拖拽排序）
  new Sortable(document.querySelector('.sortable-list'), {
    animation: 150
  });

  // 获取静态参照顺序
  const referenceList = document.querySelector('.reference-list');
  const referenceOrder = Array.from(referenceList.children).map(li => li.dataset.compare);

  // 绑定验证按钮事件
  const verifyBtn = document.getElementById('verify-btn');
  const resultMsg = document.getElementById('result-message');

  verifyBtn.addEventListener('click', function() {
    const sortableList = document.querySelector('.sortable-list');
    const currentOrder = Array.from(sortableList.children).map(li => li.dataset.compare);

    // 对比顺序
    const isMatch = referenceOrder.every((val, index) => val === currentOrder[index]);

    // 显示结果
    if (isMatch) {
      resultMsg.textContent = '排序正确！🎉';
      resultMsg.style.color = 'green';
    } else {
      resultMsg.textContent = '排序不对哦，再调整一下吧～';
      resultMsg.style.color = 'red';
    }
  });
});

小提示 #

• 不管你的可排序列表是用拖拽、按钮上下移动还是其他方式排序，验证逻辑核心都是获取当前列表项的data-compare顺序，和静态参照顺序对比；
• 如果要做更细致的提示（比如告诉用户哪一项错了），可以在循环对比时记录不一致的位置，然后针对性提示。

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