用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的原因
- 它是轻量级的[只有3K脚本]
- 容易在现有的HTML表中使用类实现
- 可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/
解释它是如何工作的：
- 它获取.list父对象。
- 它find所有的
<li>子对象。 - 它从DOM中删除所有的
<li>子对象，但保留它们的数据 - 它使用自定义sortingfunction对li对象进行sorting
- 自定义sorting函数获取li标签中的HTML并将其转换为数字
- 然后，按照新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');
非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/
