<!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>
分享到：
相关推荐
当涉及到数据或元素的排序时，jQuery提供了一种简单的方法，这就是jQuery排序功能。在本篇中，我们将深入探讨jQuery如何实现排序，以及`jquery.sort.js`这个插件在其中的作用。 首先，jQuery本身并不直接包含一个...
一、JQuery排序基础 1.1 DOM操作：JQuery提供了简洁的API来选择、遍历和操作HTML元素。例如，`$("selector")`可以选取页面上的元素，`.sort()`函数则可以对这些元素进行排序。 1.2 数据排序：JQuery本身并不直接...
本文将深入探讨“jQuery排序”和“jQuery动态修改列”这两个主题，帮助开发者更好地理解和应用jQuery。 首先，让我们来看看“jQuery排序”。在网页开发中，我们经常需要对数据进行排序，例如表格中的行或列表项。...
类似 jQuery-UI 可排序插件的 API 和功能 可以在 IE 5.5 , Firefox 3.5 , Chrome 3 , Safari 3 和 Opera 12 上使用 用法： 从这里下载 here，然后： ul class="sortable"> li>Item 1 li>Item 2 ...
本文将深入探讨“很好的jquery排序”，特别是与“tablesort”相关的技术，这是实现无刷新表格数据排序的一种高效方法。 首先，jQuery本身并不直接包含用于表格排序的功能，但有许多插件如jQuery Tablesorter或...
在给定的标题和描述中，我们涉及了几个关键的知识点：jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先，jQuery排序通常指的是对DOM元素进行排序，...
**jQuery排序与分页理解** 在Web开发中，数据的排序和分页是常见的需求，尤其是在处理大量数据时。jQuery，作为一个广泛使用的JavaScript库，提供了方便的API来帮助开发者实现这些功能。这篇博客将深入探讨如何使用...
jQuery.sorted由Jacek Galanciak开发的超级简单的jQuery排序工具。可以按照按照文本值排序，反序排序，或者按照自定义的属性值排序。 标签：jQuery
**jQuery排序插件详解** jQuery排序插件是前端开发中常用的一种工具，它极大地简化了在网页上对元素进行动态排序的复杂性。这个插件基于JavaScript库jQuery，旨在提供直观、灵活且易于实现的排序功能，使得前端...
一、jQuery排序 在jQuery中，对表格或列表进行排序可以通过插件如`jQuery.tablesorter`来实现。这个插件允许用户点击表头来对表格中的数据进行升序或降序排序。以下是一个基本的使用步骤： 1. 引入jQuery库和...
jQuery分页排序插件是前端开发中常用的工具，它极大地提升了网页数据展示的用户体验，尤其在处理大量数据时。这款插件允许用户对HTML结构进行排序、分页和过滤，无需复杂的后端处理，减轻了服务器负担，同时也提高了...
**jQuery 简单表格排序** 在Web开发中，数据展示是常见的需求，尤其是在处理大量结构化信息时，表格（Table）是首选的布局方式。然而，为了提高用户体验，我们通常需要实现表格数据的动态排序功能。jQuery是一个轻...
本文将详细介绍如何使用JavaScript和jQuery来实现网页标签的排序功能。首先，我们需要理解JavaScript和jQuery的基础知识，它们是Web前端开发中的两个重要工具。 JavaScript是一种轻量级的解释型编程语言，广泛用于...
本文将深入探讨如何使用 jQuery 来实现排序和分页功能，这两个功能在数据展示和用户交互中非常常见，特别是对于表格数据。 **一、jQuery 排序** 1. **jQuery Tablesorter 插件**： `jquery.tablesorter` 是一个...
1. **JQuery排序**： jQuery提供了方便的数据排序插件，如`jquery.tablesorter`，它允许用户对表格数据进行点击列头进行升序或降序排序。`jquery.tablesorter`不仅可以处理基本的文本排序，还能处理日期、数字等...
### Jquery表格排序插件详解：tableSort #### 插件概述 Jquery表格排序插件，名为tableSort，由作者wjy开发于2010年12月，主要功能是提供对HTML表格数据的排序操作，支持快速排序及复杂排序算法。此插件通过Jquery...
js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签...
`js`目录则包含具体的jQuery排序代码，可能有一个或多个.js文件，比如`tableSort.js`，这是实现排序功能的核心脚本。 在实际应用中，开发者可能需要根据自己的需求对代码进行一些调整，例如增加自定义排序逻辑，...