[英]change innertext without affecting dom elements in Javascript (not jquery)
[英]JavaScript to sort DOM elements by some comparator, without jQuery
想象一下一些DOM元素:
<ul id="list">
<li data-index="3">Baz</li>
<li data-index="1">Foo</li>
<li data-index="2">Bar</li>
</ul>
在沒有jQuery的情況下如何使用JavaScript對這些元素進行排序?
類似於:
document.getElementById('list').sort(function(li) { return li.dataset.index; });
您應該使用彈性框的排序功能。 這將允許重新排序元素,而無需在DOM中移動它們。 這涉及設置CSS order
屬性。
有關更多詳細信息,請參見https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes 。
前一段時間我寫了這個:
function sortChildren(wrap, f, isNum) {
var l = wrap.children.length,
arr = new Array(l);
for(var i=0; i<l; ++i)
arr[i] = [f(wrap.children[i]), wrap.children[i]];
arr.sort(isNum
? function(a,b){ return a[0]-b[0]; }
: function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; }
);
var par = wrap.parentNode,
ref = wrap.nextSibling;
par.removeChild(wrap);
for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]);
par.insertBefore(wrap, ref);
}
基本上:
首先創建一個數組,以存儲由比較器函數返回的元素及其對應的值。
我們也可以在排序時運行該函數,但是由於DOM交互很慢,因此我們確保該函數每個元素僅運行一次。
然后,我們使用本機sort
對其進行sort
。
如果isNum
參數是真實的,我們將使用一個數值比較的排序函數。 如果比較器函數返回字符串,但您想用數字而不是按字典比較,則需要這樣做。
現在,我們從DOM中刪除wrapper元素。 通過這種方式為孩子們重新排序會降低成本(例如避免重新分配)。
最后,我們對子項重新排序,然后將包裝器放回原處。
像這樣運行
sortChildren(
document.getElementById('list'),
function(li) { return li.dataset.index; },
true
);
要么
sortChildren(
document.getElementById('list'),
function(li) { return +li.dataset.index; }
);
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>sort list</title>
</head>
<body>
<strong>Double click the list to sort by data-index</strong>
<ul id= "list">
<li data-index= "3">Baz</li>
<li data-index= "1">Foo</li>
<li data-index= "2">Bar</li>
</ul>
<script>
document.body.ondblclick=function(){
var A=[], pa= document.getElementById('list');
var itemz= pa.getElementsByTagName('li');
A.slice.call(itemz).sort(function(a, b){
return a.getAttribute('data-index')-b.getAttribute('data-index');
}).forEach(function(next){
pa.appendChild(next);
});
}
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.