ページの読み込み時に高から低に自動的に表示する3つのリストアイテムのセットがあります。理想的には、jqueryまたはjavascriptを使用します。
<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
各リスト項目には個別の背景画像があるため、各リスト項目には独自のIDが必要です。ユーザーが編集できるように、番号はノードにテキストを入力する必要があります。
これはjQueryを使用しないため、おそらくこれが最も高速な方法です。
function sortList(ul){
var new_ul = ul.cloneNode(false);
// Add all lis to an array
var lis = [];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI')
lis.Push(ul.childNodes[i]);
}
// Sort the lis in descending order
lis.sort(function(a, b){
return parseInt(b.childNodes[0].data , 10) -
parseInt(a.childNodes[0].data , 10);
});
// Add them into the ul in order
for(var i = 0; i < lis.length; i++)
new_ul.appendChild(lis[i]);
ul.parentNode.replaceChild(new_ul, ul);
}
次のような関数を呼び出します。
sortList(document.getElementsByClassName('list')[0]);
同じ方法で他のリストを並べ替えることができます。リストクラスを使用して同じページに他の要素がある場合は、ulにIDを指定し、代わりにそれを使用して渡す必要があります。
編集
PageLoadで実行することを希望していると述べたので、ulがDOMにある後にできるだけ早く実行することを想定しています。つまり、関数sortList
をページの先頭に追加して使用する必要があります。次のようにあなたのリストの直後に:
<head>
...
<script type="text/javascript">
function sortList(ul){
var new_ul = ul.cloneNode(false);
var lis = [];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI')
lis.Push(ul.childNodes[i]);
}
lis.sort(function(a, b){
return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
});
for(var i = 0; i < lis.length; i++)
new_ul.appendChild(lis[i]);
ul.parentNode.replaceChild(new_ul, ul);
}
</script>
</head>
<body>
...
<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
<script type="text/javascript">
!function(){
var uls = document.getElementsByTagName('ul');
sortList( uls[uls.length - 1] );
}();
</script>
...
</body>
この軽量のjqueryプラグインを使用できます List.js 原因
[〜#〜] html [〜#〜]
<div id="my-list">
<ul class="list">
<li>
<h3 class="name">Luke</h3>
</li>
<li>
<h3 class="name">John</h3>
</li>
</ul>
</div>
Javascript
var options = {
valueNames: ['name']
};
var myList = new List('my-list', options);
あなたはこれを試すことができます
var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));
arr.sort(function(a, b) {
var textA = +$(a).text();
var textB = +$(b).text();
if (textA < textB) return -1;
if (textA > textB) return 1;
return 0;
});
ul.empty();
$.each(arr, function() {
ul.append(this);
});
ライブの例: http://jsfiddle.net/B7hdx/1
このコードは、.list
アイテムが1つしかないと想定してリストをソートします。
function sortList(selector) {
var parent$ = $(selector);
parent$.find("li").detach().sort(function(a, b) {
return(Number(a.innerHTML) - Number(b.innerHTML));
}).each(function(index, el) {
parent$.append(el);
});
}
sortList(".list");
あなたはそれがここで機能するのを見ることができます: http://jsfiddle.net/jfriend00/FjuMB/
それがどのように機能するかを説明するには:
<li>
子オブジェクトを検索します。<li>
子オブジェクトを削除しますが、それらのデータは保持しますその結果、それらはソートされた順序で表示されます。
編集:
この改良版では、複数のリストオブジェクトを一度に並べ替えることもできます。
function sortList(selector) {
$(selector).find("li").sort(function(a, b) {
return(Number(a.innerHTML) - Number(b.innerHTML));
}).each(function(index, el) {
$(el).parent().append(el);
});
}
sortList(".list");
この小さなjQueryプラグイン もあります。これはあなたの並べ替えを他の何にもしません:
$('.list>li').tsort({attr:'id'});
jquery以外のバージョン(Vanilla javascript)
利点:リストは適切に並べ替えられます。これにより、LIが破壊されたり、LIに関連付けられている可能性のあるイベントが削除されたりすることはありません。周りをシャッフルするだけです
ULにIDを追加しました:
<ul id="myList" class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
とバニラのjavascript(jqueryなし)
// Grab a reference to the UL
var container = document.getElementById("myList");
// Gather all the LI's from the container
var contents = container.querySelectorAll("li");
// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
list.Push(contents[i]);
}
// Sort based on innerHTML (sorts "in place")
list.sort(function(a, b){
var aa = parseInt(a.innerHTML);
var bb = parseInt(b.innerHTML);
return aa < bb ? -1 : (aa > bb ? 1 : 0);
});
// We'll reverse the array because our shuffle runs backwards
list.reverse();
// Shuffle the order based on the order of our list array.
for(var i=0; i<list.length; i++){
console.log(list[i].innerHTML);
container.insertBefore(list[i], container.firstChild);
}
そしてフィドル証明: https://jsfiddle.net/L27gpnh6/1/
このような何かが役立つはずです:
var $parent = $(".list");
$(".list li").sort(function (a, b) {
return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10);
}).remove().each(function () {
$parent.append($(this));
});
ヘルプのためのjQueryの使用:
var sortFunction = function(a, b) {
return (+($(b).text())) - (+($(a).text()));
}
var lis = $('ul.list li');
lis = Array.prototype.sort.call(lis, sortFunction);
for (var i = 0; i < lis.length; i++) {
$('ul.list').append(lis[i]);
}
この方法を使用できます。
var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
こちらの記事を確認してください: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
編集:それを行う非常にクールなjqueryプラグインがあります: http://tinysort.sjeiti.com/
通常の配列としてjQueryコレクションを並べ替えてから、各要素を正しい順序で追加します。
$(".list li").sort(function(a, b) {
return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);
}).appendTo('.list');