jquery each，jQuery中$.each()函数的用法引申实例
一、jQuery中$.each()函数的用法引申实例
jQuery中的$.each()函数比forEach更加强大,可以用来遍历JavaScript中的任意集合,借来下来我们会举几个jQuery中$.each()函数的用法引申实例,首先先来回顾一下遍历用法的基础:
$.each(collection,callback(indexInArray,valueOfElement))
值得一提的是，forEach可以很方便的遍历数组和NodeList，jQuery中的jQuery对象本身已经部署了这类遍历方法，而在原生JavaScript中则可以使用forEach方法，但是IE并不支持，因此我们可以手动把forEach方法部署到数组和NodeList中:
if(!Array.prototype.forEach){
Array.prototype.forEach=function(fn,scope){
for(vari=0,len=this.length;i<len;++i){
fn.call(scope,this[i],i,this);
}
}
}
//部署完毕后IE也可以使用forEach了
document.getElementsByTagName('p').forEach(function(e){
e.className='inner';
});
而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
二、zepto和jquery的区别
1、针对移动端程序zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），zepto是不支持IE浏览器的。
2、DOM操作的区别添加id时jquery不会生效而zepto会生效。
3、事件触发的区别使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行。
4、事件委托的区别zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件。5、js精简方面zepto是jquery的精简，针对移动端去除了大量jquery的兼容代码。6、其他方面zepto中没有为原型定义extend方法而jquery有；zepto的each方法只能遍历数组，不能遍历JSON对象。
三、基于jquery的表格排序
$(function(){
//存入点击列的每一个TD的内容；
varaTdCont=[];
//点击列的索引值
varthi=0
//重新对TR进行排序
varsetTrIndex=function(tdIndex){
for(i=0;i<aTdCont.length;i++){
vartrCont=aTdCont[i];
$("tbodytr").each(function(){
varthisText=$(this).children("td:eq("+tdIndex+")").text();
if(thisText==trCont){
$("tbody").append($(this));
}
});
}
}
//比较函数的参数函数
varcompare_down=function(a,b){
returna-b;
}
varcompare_up=function(a,b){
returnb-a;
}
//比较函数
varfSort=function(compare){
aTdCont.sort(compare);
}
//取出TD的值，并存入数组,取出前二个TD值；
varfSetTdCont=function(thIndex){
$("tbodytr").each(function(){
vartdCont=$(this).children("td:eq("+thIndex+")").text();
aTdCont.push(tdCont);
});
}
//点击时需要执行的函数
varclickFun=function(thindex){
aTdCont=[];
//获取点击当前列的索引值
varnThCount=thindex;
//调用sortTh函数取出要比较的数据
fSetTdCont(nThCount);
}
//点击事件绑定函数
$("th").toggle(function(){
thi=$(this).index();
clickFun(thi);
//调用比较函数,降序
fSort(compare_up);
//重新排序行
setTrIndex(thi);
},function(){
clickFun(thi);
//调用比较函数升序
fSort(compare_down);
//重新排序行
setTrIndex(thi);
})
})
主要思路：
因为JS有SORT的方法，对数组进行排序，那么通过个方法，我们就会想到数组了。
1.点标表格标头的时候，取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。
2.对表格的数据部分，也就是tbody部分，进行点击的列的取值，把这些值存入到一个数组当中。
3.将存入数据的数组，通过SORT方法进行排序。（这里写了两种，升，或降，因为是点击时要切换排序的方式。第一次降，第二次升，第三降，第四升，依次进行）
4.将排序好的数组的值进行遍历，在遍历过程中，和每一行TR的点击列的那个TD当中的数据进行一个比较。如果相等，就插入到tbody的最后去.（最先插入的，将是在第一行。）