`
孤魂野鬼
  • 浏览: 10002 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Jquery排序

阅读更多 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">

/**
 * 车龄排序,
 * 0降序，1升序
 */
function clSort(arr,flag){
	arr.sort(function(a, b) {
		if(flag == 1) {
			return a - b;
		} else {
			return b - a;
		}
	});
}

function appendStr(sArr,dArr,str){
	$(sArr).each(function() {
		dArr.push(this + str);
	});
}
$(function() {
    $('.sort').click(function(e) {
		
		var year = [], month = [];
		
		//把年月分开
		$('.cl').each(function() {
            var txt = $(this).text();
            if (txt.substring(txt.length - 1, txt.length) == '年') {
				year.push(txt.substring(0, txt.length - 1));
            } else {
				month.push(txt.substring(0, txt.length - 1));
            }
        });
		
		var resultArr = [];
		if ($('#sortDir').val() == '' || $('#sortDir').val() == 'undefined' || $('#sortDir').val() == 'asc') {
        	clSort(year,0);
			clSort(month,0);
			appendStr(year,resultArr,'年');
			appendStr(month,resultArr,'月');
			$('#sortDir').val('desc');
        } else {
			clSort(year,1);
			clSort(month,1)
			appendStr(month,resultArr,'月');
			appendStr(year,resultArr,'年');
			$('#sortDir').val('asc');
        }
		var children = [];
		$(resultArr).each(function() {
            var res = this;
			$('.cl').each(function(){
				if($(this).text() == res){
					children.push($(this).parents("div.sj_zscar_box"));
				}
			})        
		});
        
		$('#main').children().remove();
        $('#main').append(children);  
    });

});
</script>
</head>

<body>
<div style="cursor:pointer;" class="sort">排序</div>
<div id="main">
  <div class="sj_zscar_box" id="test1">
    <p class="sj_zscar_img">
    <p class="sj_zscar_name"><a href="${ctx}/vehiclepub/view/${obj.id}">奥迪</a></p>
    <ul class="sj_zscar_info">
      <li>当前价格：<span class="sj_zscar_jg">100万元</span></li>
      <li class="cl">1年</li>
    </ul>
  </div>
  <div class="sj_zscar_box" id="test2">
    <p class="sj_zscar_img">
    <p class="sj_zscar_name"><a href="${ctx}/vehiclepub/view/${obj.id}">奥迪</a></p>
    <ul class="sj_zscar_info">
      <li>当前价格：<span class="sj_zscar_jg">100万元</span></li>
      <li class="cl">2年</li>
    </ul>
  </div>
  <div class="sj_zscar_box" id="test3">
    <p class="sj_zscar_img">
    <p class="sj_zscar_name"><a href="${ctx}/vehiclepub/view/${obj.id}">奥迪</a></p>
    <ul class="sj_zscar_info">
      <li>当前价格：<span class="sj_zscar_jg">100万元</span></li>
      <li class="cl">3年</li>
    </ul>
  </div>
  <div class="sj_zscar_box" id="test4">
    <p class="sj_zscar_img">
    <p class="sj_zscar_name"><a href="${ctx}/vehiclepub/view/${obj.id}">奥迪</a></p>
    <ul class="sj_zscar_info">
      <li>当前价格：<span class="sj_zscar_jg">100万元</span></li>
      <li class="cl">1月</li>
    </ul>
  </div>
  <div class="sj_zscar_box" id="test5">
    <p class="sj_zscar_img">
    <p class="sj_zscar_name"><a href="${ctx}/vehiclepub/view/${obj.id}">奥迪</a></p>
    <ul class="sj_zscar_info">
      <li>当前价格：<span class="sj_zscar_jg">100万元</span></li>
      <li class="cl">2月</li>
    </ul>
  </div>
</div>
<input type="text" id="sortDir"/>
</body>
</html>
分享到：
| java序列化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics