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

Question

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

第一个列表是静态的，第二个列表是可排序的。一旦用户以正确的顺序对列表进行排序，[data-compare 1 to 4] 在两个列表中，他们单击一个按钮来检查他们是否得到了正确的匹配项。

有在单个列表中设置正确顺序 1 到 X 的示例，但是，none我可以找到比较两个列表的方法。

基础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>

Answer 1

你可以先得到两个数组 data-compare 的值，然后使用 every 方法检查两个数组中的每个元素是否相同。

const getData = arr => {
  return arr.map(function() {
    return $(this).attr('data-compare')
  }).get();
}

const l1 = getData($('ul:nth-of-type(1) li'))
const l2 = getData($('ul:nth-of-type(2) li'))

const check = l1.every((e, i) => l2[i] == e);

console.log(check)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

如果一个有序列表有 data-compare 个值为 1、2、3、4 的属性，您可以只检查 data-compare 的值是否与列表项的索引相同 + 1:

function checkOrdered(list) {
  return Array.from(list).every((item, i) => item.getAttribute('data-compare') == (i + 1));
}

console.log(checkOrdered(document.querySelectorAll('#list1 > li')));

console.log(checkOrdered(document.querySelectorAll('#list2 > li')));

<ul id="list1">
  <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>

<ul id="list2">
  <li data-compare="1">Tree</li>
  <li data-compare="2">Bush</li>
  <li data-compare="3">In the ground</li>
  <li data-compare="4">Palm tree</li>
</ul>

您可以使用另一个列表作为比较基础来做同样的事情：

function checkOrdered(list1, list2) {
  return Array.from(list1).every((item, i) => 
    item.getAttribute('data-compare') === list2[i].getAttribute('data-compare'));
}

const src = document.querySelectorAll('#src > li');
const target1 = document.querySelectorAll('#target1 > li');
const target2 = document.querySelectorAll('#target2 > li');

console.log(checkOrdered(src, target1));

console.log(checkOrdered(src, target2));

<ul id="src">
  <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 id="target1">
  <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>

<ul id="target2">
  <li data-compare="1">Tree</li>
  <li data-compare="2">Bush</li>
  <li data-compare="3">In the ground</li>
  <li data-compare="4">Palm tree</li>
</ul>

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

JavaScript or jQuery compare two ordered lists using data-attribute

javascript

jquery

arrays

match

custom-data-attribute