JavaScript或jQuery使用数据属性比较两个有序列表

我希望能够在Javascript或jQuery中使用数据属性比较两个列表。我在任何地方都找不到这样的例子，也不知道该怎么做

第一个列表是静态的，第二个列表是可排序的。一旦用户按正确的顺序对列表进行排序，[数据比较1到4]在两个列表中，他们单击一个按钮检查匹配是否正确

在一个列表中有将正确的顺序1设置为X的例子，但是，我找不到一个可以比较两个列表的例子

基本HTML：

<ul>
    <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>

  <ul>
    <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>

香蕉
番茄
胡萝卜
日期


树
棕榈树
衬套
地上的

您可以首先获得两个具有

数据比较

值的数组，然后使用

each

方法检查两个数组中的每个元素是否相同

const getData=arr=>{
返回arr.map（函数（）{
返回$（this.attr（'data-compare'））
}).get（）；
}
常量l1=getData（$（'ul:n类型（1）li'））
常量l2=getData（$（'ul:n类型（2）li'））
const check=l1.every（（e，i）=>l2[i]==e）；
控制台日志（检查）

香蕉
番茄
胡萝卜
日期


树
棕榈树
衬套
地上的

您可以首先获得两个具有

数据比较

值的数组，然后使用

每个

方法检查两个数组中的每个元素是否相同

const getData=arr=>{
返回arr.map（函数（）{
返回$（this.attr（'data-compare'））
}).get（）；
}
常量l1=getData（$（'ul:n类型（1）li'））
常量l2=getData（$（'ul:n类型（2）li'））
const check=l1.every（（e，i）=>l2[i]==e）；
控制台日志（检查）

香蕉
番茄
胡萝卜
日期


树
棕榈树
衬套
地上的

如果一个有序列表具有值为1、2、3、4的

数据比较属性，您只需检查
数据比较的值是否与列表项的索引+1相同：


功能检查顺序（列表）{
返回Array.from（list）.every（（item，i）=>item.getAttribute（'data-compare'）==（i+1））；
}
log（checkOrdered（document.querySelectorAll（'#list1>li'））；
log（checkOrdered（document.querySelectorAll（'#list2>li'））

树
棕榈树
衬套
地上的



树
衬套
地上的

棕榈树
如果一个有序列表具有值为1、2、3、4的
数据比较属性，您只需检查
数据比较的值是否与列表项的索引+1相同：


功能检查顺序（列表）{
返回Array.from（list）.every（（item，i）=>item.getAttribute（'data-compare'）==（i+1））；
}
log（checkOrdered（document.querySelectorAll（'#list1>li'））；
log（checkOrdered（document.querySelectorAll（'#list2>li'））

树
棕榈树
衬套
地上的



树
衬套
地上的

棕榈树
@rockstar-抓得好。谢谢，谢谢大家。你帮了我大忙：-）@rockstar-抓得好。谢谢，谢谢大家。你帮了我大忙：-）