如何以有效的方式按给定数组对节点列表进行排序
How to sort a list of nodes by a given array in an efficient way?
我有这个HTML,它是一个元素列表:
<div class="container">
<div class="apple-0">first-apple</div>
<div class="apple-1">second-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
</div>
例如,我得到了一个数组,[3,4,0,2,1]
我需要按此顺序对列表进行排序。我的意思是,第三个元素<div class="apple-3">third-apple</div>
应该是第一个。第二个元素应该是 forth-apple
.
如何以有效的方式更改它?这是预期的输出:
<div class="container">
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
<div class="apple-0">first-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-1">second-apple</div>
</div>
可以使用jQuery。
您可以通过
循环遍历数组并通过其匹配的索引附加每个div
来执行此操作。试试这个:
var $divs = $('.container > div').detach();
[3, 4, 0, 2, 1].forEach(function(value) {
$divs.eq(value).appendTo('.container');
});
工作示例
请注意,如果您需要支持较旧的浏览器(<IE9),则需要将forEach()
替换为标准for
循环。>
你可以尝试这样的事情:
$("#sort").on("click", function() {
var data = [3, 4, 0, 2, 1];
var result = "";
data.forEach(function(item) {
result += $(".container").find(".apple-" + item)[0].outerHTML;
});
$(".container").html(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
<div class="apple-0">first-apple</div>
<div class="apple-1">second-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
</div>
<button id="sort">Sort</button>
只需迭代 indexes
数组并继续在第 n 个索引处推动子级
var output = [];
var indexes = [3,4,0,2,1];
indexes.forEach(function(value, index){
output.push($(".container div").eq(indexes[index])[0].outerHTML);
});
console.log(output);
$(".container").html(output.join(""));
演示
你可以试试:
更新:
var arr = [3,4,0,2,1];
var nodes = [];
arr.forEach(funtion(value){
var node = $('.container .apple-'+value)[0];
nodes.push(node);
});
$('.container').html(nodes);
演示
其他带有eq
的答案很好,但是如果您想使用不同的数组再次排序,或者数组最初未排序,那么它们将失败。此外,您还要求一种有效的方法,使用本机循环而不是jquery的每个循环都可以带来性能优势。所以我对此的回答是
$(document).ready(function () {
var inputEls = $('#awesomeContainer').find('>').get(),
$output = $('#awesomeOutput'),
order = [3,4,0,2,1],
output = [],
myValue,
newIndex,
i,
length = inputEls.length;
for (i = 0; i < length; i += 1) {
myValue = Number((inputEls[i].className || "").replace("apple-", ""));
if (myValue >= 0) {
myValue = order.indexOf(myValue);
myValue > -1 && (output[myValue] = inputEls[i].outerHTML);
}
}
$output.append(output.join(''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<b>Input: </b>
<div id="awesomeContainer" class="container">
<div class="apple-0">first-apple</div>
<div class="apple-1">second-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
</div>
<br/>
<b>Sorted: </b>
<div id="awesomeOutput" class="container">
</div>
相关文章:
- querySelectorAll返回空节点列表
- 未捕获的类型错误:对象#<节点列表>没有方法'addEventListener'
- 从HTML代码段创建节点列表后,.find()未按预期工作
- 如何以有效的方式按给定数组对节点列表进行排序
- 循环遍历节点列表 JS
- 为 Javascript 节点列表返回的长度无效
- 从 2 个得分最高的节点列表中获取 3 个节点(我自己设置的属性)
- 在节点列表中查找节点
- 当我尝试打印到文本区域字段中时,数据被[对象节点列表]替换
- 节点列表操作
- 合并两个节点列表而不重复
- XML解析器/从XML节点列表创建一个XML DOM文档
- 努力将事件侦听器添加到数组或节点列表
- 如何从节点列表访问 HTML 元素的内容
- 获取从当前节点开始并以根节点结束的节点列表
- Javascript构建元素引用节点列表
- 如何在Javascript中识别节点列表中的标记
- Javascript对象节点列表
- 动态和静态节点列表
- 我们可以直接从节点列表中删除节点吗