用javascriptsortinghtml列表

我有一组三个列表项,我想在页面加载时自动从高到低显示。 理想情况下使用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]); 

你可以用同样的方式对其他列表进行sorting,如果你在列表类的同一页面上有其他元素,你应该给你的ul一个id,然后用它来传递它。

示例JSFiddle

编辑

既然你提到你希望它发生在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的原因

  1. 它是轻量级的[只有3K脚本]
  2. 容易在现有的HTML表中使用类实现
  3. 可search,可sorting和可过滤

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

这个代码将sorting该列表,假设只有一个.list项目:

 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/

解释它是如何工作的:

  1. 它获取.list父对象。
  2. 它find所有的<li>子对象。
  3. 它从DOM中删除所有的<li>子对象,但保留它们的数据
  4. 它使用自定义sortingfunction对li对象进行sorting
  5. 自定义sorting函数获取li标签中的HTML并将其转换为数字
  6. 然后,按照新sorting的顺序遍历数组,每个li标签被追回到原来的父代。

结果是它们按sorting顺序显示。

编辑:

这个改进版本甚至可以一次对多个列表对象进行sorting:

 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"); 

演示: http : //jsfiddle.net/jfriend00/RsLwX/

还有这个小的jQuery插件 。 这将使你的sorting不过是:

 $('.list>li').tsort({attr:'id'}); 

像这样的东西应该有所帮助:

 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)); }); 

一种方法可能是对li元素的数组 (以及jQuery对象)进行sorting,并将ul的内容(使用html方法)replace为元素的sorting数组:

 $(".list").html($(".list li").sort(function(a, b) { return parseInt($(b).text(), 10) - parseInt($(a).text(), 10); })); 

这是一个工作的例子 。

你可以使用这个方法:

 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求助:

 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]); } 

小提琴链接

按常规方式对jQuery集合进行sorting,然后按照正确的顺序将每个元素添加回去。

 $(".list li").sort(function(a, b) { return parseInt($(b).text(), 10) - parseInt($(a).text(), 10); }).appendTo('.list'); 

http://jsfiddle.net/zMmWj/

非jQuery版本(香草javascript)

好处:该列表已sorting,不会破坏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); } 

和小提琴certificate: https : //jsfiddle.net/L27gpnh6/1/