转:js,jQuery 排序的实现,网页标签排序的实现,标签排序
js,jQuery 排序的实现:
重点: 想要实现排序,最简单的方法就是
- 先把标签用jQuery读进对象数组
- 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改)
- 用对象数组内容覆盖网页上的标签数组;
//排序从文字短的到长的
var arr_a=new Array();
var i=0;
$(".type_list_txt > span:contains('T恤')").parent().children("a").each(function(){
arr_a[i]=$(this).clone();
i++;
});
for(i=0; i<arr_a.length;i++){
for(j=i+1;j<arr_a.length;j++){
if($(arr_a[i]).text().length > $(arr_a[j]).text().length ){
temp=arr_a[i];
arr_a[i]=arr_a[j];
arr_a[j]=temp;
}
}
}
i=0;
$(".type_list_txt > span:contains('T恤')").parent().children("a").each(function(){
$(this).replaceWith($(arr_a[i]));
i++;
});
原文地址:http://www.cnblogs.com/henw/archive/2011/04/26/2029474.html
参照原文,我写了自己的排序,原文的是简单的选择排序,我的是冒泡排序。
function doOrder(){
//#orderCom为页面上的按钮
var type = $("#orderCom").attr("type");
console.log(type);
var flelems = new Array();
var fi = 0;
//globalFl为全局变量,逐个获取元素
$("#detail"+globalFl).children().each(function(){
flelems[fi] = $(this).clone();
fi++;
});
if(type=="asc"){
//asc排序
for(var i=0;i<flelems.length-1;i++){
for(var j=0;j<flelems.length-i-1;j++){
if(parseFloat($(flelems[j]).attr('cval'))>parseFloat($(flelems[j+1]).attr('cval'))){
var ele = flelems[j];
flelems[j] = flelems[j+1];
flelems[j+1] = ele;
}
}
}
$("#orderCom").attr("type","desc");
$("#orderCom").text("积分↓");
}else{
//desc排序
for(var i=0;i<flelems.length-1;i++){
for(var j=0;j<flelems.length-i-1;j++){
if(parseFloat($(flelems[j]).attr('cval'))<parseFloat($(flelems[j+1]).attr('cval'))){
var ele = flelems[j];
flelems[j] = flelems[j+1];
flelems[j+1] = ele;
}
}
}
$("#orderCom").attr("type","asc");
$("#orderCom").text("积分↑");
}
fi = 0;
//把排序好的html写入
$("#detail"+globalFl).children().each(function(){
$(this).replaceWith($(flelems[fi]));
fi++;
});
}
转:js,jQuery 排序的实现,网页标签排序的实现,标签排序的更多相关文章
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- Web基础 HTML CSS JS JQuery AJAX
1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...
- JS jquery ajax 已看1 有用
4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择: ...
- js jquery 选择器总结
js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- js jquery, jquery-ui 获取form各种表单input的值?
如何获取? make up (for): 弥补, 补偿, her beaty cannot make up for her stu'pidity. five Basic laws of human s ...
随机推荐
- Redis 学习数据类型
该文使用centos6.5 64位 redis-3.2.8 [root@localhost bin]# netstat -tunpl |grep 6379 查看redis 是否启动成功 一.Stri ...
- Python package install血泪史
[前言][絮絮叨叨篇]:说实话,不是第一次安装Python库了,但是貌似没有特别顺利的时候,可能还是遇到的困难不够多咯.配置环境真是个糟心的事儿,不过作为菜鸟,还是得磨练磨练,毕竟某人云:" ...
- ARM处理器:开放者的逆袭
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 1981年,英国BBC电视台策划了一系列关于计算机的电视节目.但导演发现一个问题:怎么给没见过电脑的观众画 ...
- warshall、
#include<iostream> int mian() { ][],b[][],c[][]; int i,j,k; cout<<"input the Boolea ...
- 《C++ Primer》读书笔记—第一章 开始
声明: 文中内容收集整理自<C++ Primer 中文版 (第5版)>,版权归原书所有. 学习一门程序设计语言最好的方法就是练习编程. 1.一个函数的定义包含四个部分:返回类型(retur ...
- ios跳转到系统设置
在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 第一 跳转到自己项目(在需要调转的按钮动作中添加如下的代码,就 ...
- 剑指offer编程题Java实现——面试题5从头到尾打印链表
题目描述* 剑指offer面试题5:从尾到头打印链表 输入一个链表的头结点,从尾到头打印出每个结点的值 解决方案一:首先遍历链表的节点后打印,典型的"后进先出",可以使用栈来实现这 ...
- 项目架构开发:数据访问层之Query
接上文 项目架构开发:数据访问层之Repository 上一章我们讲了IRepository接口,这张我们来讲IQuery 根据字面意思就可以知道,这次主要讲数据查询,上一章我们只针对单表做了查询的操 ...
- jquery小测
1.在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has() $("div:has ...
- swiper入门之快速实现轮播--手机端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...