jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
本文实例讲述了jQuery实现条件搜索查询、实时取值及升降序排序的方法。分享给大家供大家参考，具体如下：
一。鼠标点击获取搜索条件中的被选中的值
创建方法 getAttrValue()方法，每次的.click都要调用 function getAttrValue(){}
例如，把选中的值给到属性data-value。只需要每次点击，获取li.active的子集 a的.attr("data-value")即可
eg:
varpubTime=$(getArr[0]).find("li.active").children().attr("data-value");
pubTime就是第一个搜索项的值
二。排序方式的状态（主要应用于table内容的升降序排列需求）
排序方式分为三种状态：
1.默认灰色未选中
2.点击默认降序 .desc
3.再点击升序 .asc
CSS：
.search-sortlia,.search-sortlia.asc,.search-sortlia.desc{background-image:sort.png}--灰色图标
.search-sortli.activea.desc{background-image:desc.png}--向下的蓝色图标
.search-sortli.activea.asc{background-image:asc.png!important;}--向上的蓝色图标
JS：默认第一个排序降序被选中。切换排序方式，默认展示降序。排序方式互斥
//第一行：lia.asc--展示灰色图标
//第二行:第一次点击li时，li.activea.desc，展示向下的蓝色图标，并且清除siblings.active；同时，其他的排序方式默认asc；
//getAttrValue()---每次选中就走一次输出
$(".search-sortlia").addClass("asc");
$(".search-sortli").each(function(){
$(this).click(function(){
$(this).addClass("active");
$(this).children("a").addClass("desc").toggleClass("asc");
$(this).siblings().removeClass("active");
$(this).siblings().children().removeClass("desc").addClass("asc");
getAttrValue();
})
});
//默认第一个时间降序被选中
$($(".search-sort").children()[0]).addClass("active")
$($(".search-sort").children()[0]).children().addClass("desc").removeClass("asc");
三。获取排序方式的值
li.activea[class="desc/asc"]
/*
*sortArr//排序方式给出一个数组
*根据index脚标找sortArr对应的值
**/
varsortArr=["sortTime","sortTotalComment","sortIncreaseComment"];//三种排序方式
varsortIndex=$(getArr[getLen-1]).find("li.active").index();//当前那个按钮被选中,返回脚标
varsortLast=$(getArr[getLen-1]).find("li.active").children().attr("class");//返回被选中按钮的classname
varsortLastString=sortLast.substring(11);//substring(11)截取从11到最后的字符串==desc/descasc
vardataValue=sortArr[sortIndex].concat(sortLastString);//.concat()生成新的字符串
dataValue 就是排序方式的值
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。