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

Question

I want to be able to compare two lists using data attribute in either Javascript or jQuery. I can't find an example of this anywhere and don't know how to go about it.

The first list is static and the second list is sortable. Once the user sorts the lists in the right order, [data-compare 1 to 4] in both lists, they click a button to check if they got the matches correct.

There are examples of setting the correct order 1 to X in a single list, but, none I can find to compare two lists.

The basic 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

You can first get two arrays with data-compare values and then use every method to check if each element is the same in both arrays.

 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

If an ordered list has data-compare attributes with the values 1, 2, 3, 4, you can just check if the the value of the data-compare is identical to the list item's index + 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> 

You can do the same thing using another list as the compare basis:

 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>