面试题:请使用jquery使列表按照数字大小进行排序!

amhoho 发布于 2013/01/30 11:59
阅读 4K+
收藏 1

请使用jquery,当点击排序按钮时让列表按照orderid的值大小进行顺序,再次点击则列出反序。

按钮:

<span class="paixu">排序</span>

列表:

<ul>
<li><span>数值是:</span><span class="orderid">108</span>我是第108个</li>
<li><span>数值是:</span><span class="orderid">101</span>我是第101个</li>
<li><span>数值是:</span><span class="orderid">17</span>我是第17个</li>
<li><span>数值是:</span><span class="orderid">253</span>我是第253个</li>
<li><span>数值是:</span><span class="orderid">5</span>我是第5个</li>
...
</ul>
加载中
0
叛道
叛道
<span class="paixu" mode="0" style="display:inline-block;padding:5px 10px;cursor: pointer;background:red;color:#fff;">排序</span>
<ul id="list">
	<li><span>数值是:</span><span class="orderid">108</span>我是第108个</li>
	<li><span>数值是:</span><span class="orderid">101</span>我是第101个</li>
	<li><span>数值是:</span><span class="orderid">17</span>我是第17个</li>
	<li><span>数值是:</span><span class="orderid">253</span>我是第253个</li>
	<li><span>数值是:</span><span class="orderid">5</span>我是第5个</li>
</ul>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$(function() {
		//1即DESC从大到小,0即ASC从小到大
		$(".paixu").click(function() {
			var orderIdArray = [];
			var idIndex = [];
			var mode = $(this).attr("mode");
			var orderid = $(".orderid");

			orderid.each(function(i) {
				var id = parseInt($(this).html()); 
				idIndex[id] = i;        //orderid的序号
				orderIdArray.push(id);  //orderid的值
			});

			if(mode == 1) 
			{
				$(this).attr("mode", 0);
				$(this).html("从大到小排序");
				orderIdArray = orderIdArray.sort(function(a, b){return (a < b) ? 1 : -1}); //从大到小排序 
			} 
			else if(mode == 0) 
			{
				$(this).attr("mode", 1);
				$(this).html("从小到大排序");
				orderIdArray = orderIdArray.sort(function(a, b){return (a > b) ? 1 : -1}); //从小到大排序
			}
 
			//alert(orderIdArray+", "+idIndex);

			var list = $("#list").find("li");
			var _length = orderIdArray.length;

			for (var i=0; i<_length; i++) 
			{
				$("#list").append(list.eq(idIndex[orderIdArray[i]]));
			} 
		});
	});
</script>
0
a
amhoho

引用来自“叛道pandao”的答案

<span class="paixu" mode="0" style="display:inline-block;padding:5px 10px;cursor: pointer;background:red;color:#fff;">排序</span>
<ul id="list">
	<li><span>数值是:</span><span class="orderid">108</span>我是第108个</li>
	<li><span>数值是:</span><span class="orderid">101</span>我是第101个</li>
	<li><span>数值是:</span><span class="orderid">17</span>我是第17个</li>
	<li><span>数值是:</span><span class="orderid">253</span>我是第253个</li>
	<li><span>数值是:</span><span class="orderid">5</span>我是第5个</li>
</ul>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$(function() {
		//1即DESC从大到小,0即ASC从小到大
		$(".paixu").click(function() {
			var orderIdArray = [];
			var idIndex = [];
			var mode = $(this).attr("mode");
			var orderid = $(".orderid");

			orderid.each(function(i) {
				var id = parseInt($(this).html()); 
				idIndex[id] = i;        //orderid的序号
				orderIdArray.push(id);  //orderid的值
			});

			if(mode == 1) 
			{
				$(this).attr("mode", 0);
				$(this).html("从大到小排序");
				orderIdArray = orderIdArray.sort(function(a, b){return (a < b) ? 1 : -1}); //从大到小排序 
			} 
			else if(mode == 0) 
			{
				$(this).attr("mode", 1);
				$(this).html("从小到大排序");
				orderIdArray = orderIdArray.sort(function(a, b){return (a > b) ? 1 : -1}); //从小到大排序
			}
 
			//alert(orderIdArray+", "+idIndex);

			var list = $("#list").find("li");
			var _length = orderIdArray.length;

			for (var i=0; i<_length; i++) 
			{
				$("#list").append(list.eq(idIndex[orderIdArray[i]]));
			} 
		});
	});
</script>
楼上这个当数字重复或者 如110 1 1010 11 151 101 这样的时候 就不可用了吧~
a
amhoho
回复 @叛道pandao : 你运行一下就知道啦,相同的时候,只会有一个起作用,其余的被”置顶“不动了~
叛道
叛道
回复 @amhoho : 相同时程序自动排序
a
amhoho
回复 @叛道pandao : 试试orderid值相同的时候,如以下代码。就知道了~
叛道
叛道
没有问题啊。
0
a
amhoho
<span class="paixu" mode="0" style="display:inline-block;padding:5px 10px;cursor: pointer;background:red;color:#fff;">排序</span>
<ul id="list">
	<li><span>数值是:</span><span class="orderid">108</span>我是第108个</li>
	<li><span>数值是:</span><span class="orderid">101</span>我是第101个</li>
	<li><span>数值是:</span><span class="orderid">110</span>我是第110个</li>
	<li><span>数值是:</span><span class="orderid">253</span>我是第253个</li>
	<li><span>数值是:</span><span class="orderid">110</span>我是第110个</li>
</ul>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$(function() {
		//1即DESC从大到小,0即ASC从小到大
		$(".paixu").click(function() {
			var orderIdArray = [];
			var idIndex = [];
			var mode = $(this).attr("mode");
			var orderid = $(".orderid");

			orderid.each(function(i) {
				var id = parseInt($(this).html()); 
				idIndex[id] = i;        //orderid的序号
				orderIdArray.push(id);  //orderid的值
			});

			if(mode == 1) 
			{
				$(this).attr("mode", 0);
				$(this).html("从大到小排序");
				orderIdArray = orderIdArray.sort(function(a, b){return (a < b) ? 1 : -1}); //从大到小排序 
			} 
			else if(mode == 0) 
			{
				$(this).attr("mode", 1);
				$(this).html("从小到大排序");
				orderIdArray = orderIdArray.sort(function(a, b){return (a > b) ? 1 : -1}); //从小到大排序
			}
 
			//alert(orderIdArray+", "+idIndex);

			var list = $("#list").find("li");
			var _length = orderIdArray.length;

			for (var i=0; i<_length; i++) 
			{
				$("#list").append(list.eq(idIndex[orderIdArray[i]]));
			} 
		});
	});
</script>
返回顶部
顶部