利用JS进行重新排序输出的问题。
想要实现点击某链接然后根据话题数量(title值)进行降序排序，不知道该如何利用JS或者JQuery实现，希望高手指点，感谢！
- HTML code
//初始状态<a id="order" href="#">点击排序</a><div id="list-tag"> <a href="#" title="1 个话题" >标签 No1</a> <a href="#" title="6 个话题" >标签 No2</a> <a href="#" title="3 个话题" >标签 No3</a> <a href="#" title="5 个话题" >标签 No4</a> <a href="#" title="10 个话题" >标签 No5</a></div>//排序输出<a id="order" href="#">点击排序</a><div id="list-tag"> <a href="#" title="10 个话题" >标签 No5</a> <a href="#" title="6 个话题" >标签 No2</a> <a href="#" title="5 个话题" >标签 No4</a> <a href="#" title="3 个话题" >标签 No3</a> <a href="#" title="1 个话题" >标签 No1</a></div>
[解决办法]
- HTML code
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> a { display:inline-block; width:90px; } </style> </head> <body> <button id="asc">asc</button> <button id="desc">desc</button> <div id="list-tag"> <a href="#" title="1 个话题" >标签 No1</a> <a href="#" title="6 个话题" >标签 No2</a> <a href="#" title="3 个话题" >标签 No3</a> <a href="#" title="5 个话题" >标签 No4</a> <a href="#" title="10 个话题" >标签 No5</a> </div> <script> function $(o){return document.getElementById(o)} function makeArray( obj ){ var arr = []; for ( var i = 0, len = obj.length; i < len; i++ ){ arr.push(obj[i]); } return arr; } function asc( x, y ){ //升序 return parseInt( x.title.match(/\d+/) ) - parseInt( y.title.match(/\d+/) ); } function makeOrder( wrapper, obj, order ){ var order = order || 'asc'; var wrapper = $( wrapper ); var obj = wrapper.getElementsByTagName( obj ); var arr; arr = makeArray( obj ); // 将对象转为数组 if ( order == 'asc' ){ arr.sort( asc ); } else { arr.sort( asc ).reverse(); } for( var i = 0, len = arr.length; i < len; i++ ){ wrapper.appendChild( arr[i] ) } } $('desc').onclick = function(){ makeOrder( 'list-tag', 'a', 'desc' ) } $('asc').onclick = function(){ makeOrder( 'list-tag', 'a', 'asc' ) } </script> </body></html>
[解决办法]
jquery 直接sort就可以了
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript" src="jquery-1.6.4.min.js" ></script></head><body><span id="order" style="cursor:pointer;" >点击排序</span><div id="list-tag"> <a href="#" title="1 个话题" >标签 No1</a> <a href="#" title="6 个话题" >标签 No2</a> <a href="#" title="3 个话题" >标签 No3</a> <a href="#" title="5 个话题" >标签 No4</a> <a href="#" title="10 个话题" >标签 No5</a></div><script type="text/javascript" > $("#order").click(function() { $("#list-tag a").sort(function(a, b) { return parseInt($(a).attr("title")) < parseInt($(b).attr("title")) ? 1 : -1; }).appendTo($("#list-tag")); });</script></body></html>
[解决办法]
<script type="text/javascript">
function sorts(){
var a=[];
var as=document.getElementById("list-tag").getElementsByTagName("a");
for(var i=0;i<as.length;i++){
a.push(as[i]);
}
a.sort(x);
for(var m=0;m<a.length;m++){
document.getElementById("list-tag").appendChild(a[m]);
var b=document.createElement("br");
document.getElementById("list-tag").appendChild(b);
}
}
function x(as1,as2){
var a=parseInt(as1.getAttribute("title"));
var b=parseInt(as2.getAttribute("title"));
return a-b;
}
</script>
</head>
<body>
<a id="order" href="javascript:sorts()">点击排序</a>
<div id="list-tag">
<a href="#" title="1 个话题" >标签 No1 1个话题</a><br/>
<a href="#" title="6 个话题" >标签 No2 6个话题</a><br/>
<a href="#" title="3 个话题" >标签 No3 3个话题</a><br/>
<a href="#" title="5 个话题" >标签 No4 5个话题</a><br/>
<a href="#" title="10 个话题" >标签 No5 10个话题</a><br/>
</div>