如何使用数组索引对无序列表进行排序

Abdullah Ahamed 发表于 Dev

阿卜杜拉·阿罕默德（Abdullah Ahamed）|

我正在尝试使用数据属性对列表重新排序，请参见下面的代码。

<ul>
<li data-block="block1">Some Text...</li>
<li data-block="block2">Some Text...</li>
<li data-block="block3">Some Text...</li>
<li data-block="block4">Some Text...</li>
</ul>

在我的jQuery数组中，我有以下值

values = array("block2","block1","block4","block3");

所以我需要像下面的数组索引那样对列表进行排序/重新排序。

<ul>
<li data-block="block2">Some Text...</li>
<li data-block="block1">Some Text...</li>
<li data-block="block4">Some Text...</li>
<li data-block="block3">Some Text...</li>
</ul>

请帮助我获得正确的解决方案。

Pranav C Balan

您可以用来sort()对元素进行排序

var values = ["block2", "block1", "block4", "block3"];

// get all li with data attribute
var $li = $('li[data-block]');
// sort them based on the index
$li.sort(function(a, b) {
  return values.indexOf($(a).data('block')) - values.indexOf($(b).data('block'));
})
// update the order by appending back to it's parent
.appendTo($li.parent());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li data-block="block1">Some Text...1</li>
  <li data-block="block2">Some Text...2</li>
  <li data-block="block3">Some Text...3</li>
  <li data-block="block4">Some Text...4</li>
</ul>

ES6箭头方法

var values = ["block2", "block1", "block4", "block3"];

var $li = $('li[data-block]');
$li.sort((a, b) => values.indexOf($(a).data('block')) - values.indexOf($(b).data('block')))
  .appendTo($li.parent());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li data-block="block1">Some Text...1</li>
  <li data-block="block2">Some Text...2</li>
  <li data-block="block3">Some Text...3</li>
  <li data-block="block4">Some Text...4</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。