如何使用数组索引对无序列表进行排序
How to sort Unordered list with array index
我正在尝试使用数据属性重新排序列表,请参阅下面的代码。
<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");
所以我需要sort/reorder像下面这样的数组索引方式的列表。
<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>
请帮助我找到正确的解决方案。
您可以使用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>
你可以利用 .html()
, .map()
, Attribute Equals Selector [name="value"]
var values = Array("block2","block1","block4","block3");
$("ul").html(values.map(function(val) {return $("[data-block="+val+"]")}))
<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>
我正在尝试使用数据属性重新排序列表,请参阅下面的代码。
<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");
所以我需要sort/reorder像下面这样的数组索引方式的列表。
<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>
请帮助我找到正确的解决方案。
您可以使用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>
你可以利用 .html()
, .map()
, Attribute Equals Selector [name="value"]
var values = Array("block2","block1","block4","block3");
$("ul").html(values.map(function(val) {return $("[data-block="+val+"]")}))
<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>