排序技术升序和降序(Sorting Technique ascending and desending)
在下面的html代码中，我有一个名字和年龄，点击名称和年龄，列表项应该从升序到降序或从降序到升序排序。
这应该在不使用任何插件的情况下实现。请帮我解决如何实现这一点。 我真的非常需要。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <style type="text/css"> body{ width:100%; margin:0px;padding:0px; font-size:14px;font-family:Arial; } #content{ width:100%; border:1px solid red; height:auto; } #sorting_div{ width:300px; border:1px solid black; height:30px; } #name{ display:inline-block; width:200px; } #sorting_list{ width:300px; border:1px solid green; height:100px; } </style> </head> <body> <div id="content"> <div id="sorting_div"> <span id="name">Name</span> <span id="Age">Age</span> </div> <div id="sorting_list"> <ul> <li><label>Jenifer</label> <span>24</span></li> <li><label>Kate</label> <span>18</span></li> <li><label>David</label> <span>25</span></li> <li><label>Mark</label> <span>25</span></li> </ul> </div> </div> </body> </html>In the below html code I am having a name and age, on click of name and age the list items should get sorted from ascending to descending or descending to ascending.
This should be achieved without using any plugins Please help me out how to achieve this. I am really very needful.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <style type="text/css"> body{ width:100%; margin:0px;padding:0px; font-size:14px;font-family:Arial; } #content{ width:100%; border:1px solid red; height:auto; } #sorting_div{ width:300px; border:1px solid black; height:30px; } #name{ display:inline-block; width:200px; } #sorting_list{ width:300px; border:1px solid green; height:100px; } </style> </head> <body> <div id="content"> <div id="sorting_div"> <span id="name">Name</span> <span id="Age">Age</span> </div> <div id="sorting_list"> <ul> <li><label>Jenifer</label> <span>24</span></li> <li><label>Kate</label> <span>18</span></li> <li><label>David</label> <span>25</span></li> <li><label>Mark</label> <span>25</span></li> </ul> </div> </div> </body> </html>最满意答案
请在li元素中尝试以下示例代码以获取普通文本
var mylist = $('#sorting_list ul'); var listitems = mylist.children('li').get(); mylist.empty(); listitems.sort(function(a, b) { return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase()); }) $.each(listitems, function(idx, itm) { mylist.append(itm); });Pls try the below sample code for normal text in li element
var mylist = $('#sorting_list ul'); var listitems = mylist.children('li').get(); mylist.empty(); listitems.sort(function(a, b) { return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase()); }) $.each(listitems, function(idx, itm) { mylist.append(itm); });更多推荐
发布评论