之前都是在使用.each()，最近又仔细研究了jQuery，心细地发现了jQuery.each()，那么它们这么相像，究竟区别在哪呢，这篇文章将为诸位揭晓
$.each()函数和$（selector）.each（）是不一样的，.each（）用来遍历一个jQuery对象。而$.each()函数可以用于迭代任何集合，无论是对象还是数组。在数组的情况下，每次回调都会传递一个数组索引和相应的数组值。（该值也可以通过this关键字访问，但是Javascript总是会将this值包装为一个Object即使是简单的字符串或数字值。）该方法返回其第一个参数，即迭代的对象。
jQuery.each()说明
泛型迭代器函数，可用于无缝遍历对象和数组。具有长度属性（如函数的参数对象）的数组和类似数组的对象通过数字索引（从0到length-1）进行迭代。其他对象通过它们的命名属性进行迭代。
.each()说明
遍历一个jQuery对象，为每个匹配的元素执行一个函数。
jQuery.each()使用方法
例一
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
输出：
0：52
1：97
例二
如果一个对象用作集合，则每次都会传递一个键值对：
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
输出：
flammable: inflammable
duh: no duh
例三
可以使用return false使循环结束
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.each demo</title>
<style>
div {
color: blue;
}
div#five {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<script>
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
jQuery.each( arr, function( i, val ) {
$( "#" + val ).text( "Mine is " + val + "." );
// Will stop running after "three"
return ( val !== "three" );
});
jQuery.each( obj, function( i, val ) {
$( "#" + i ).append( document.createTextNode( " - " + val ) );
});
</script>
</body>
</html>
输出：
Mine is one. - 1
Mine is two. - 2
Mine is three. - 3
- 4
`- 5`
例三
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title></title>
</head>
<body>
<button id="test1">jQuery遍历祖先</button>
<button id="test2">模拟遍历祖先</button>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script type="text/javascript">
var ajQuery = {};
function dir(elem, dir, until) {
var matched = [],
truncate = until !== undefined;
while ((elem = elem[dir]) && elem.nodeType !== 9) {
if (elem.nodeType === 1) {
if (truncate) {
if (elem.nodeName.toLowerCase() == until || elem.className == until) {
break;
}
}
matched.push(elem);
}
}
return matched;
}
jQuery.each({
parent: function(elem) {
var parent = elem.parentNode;
return parent && parent.nodeType !== 11 ? parent : null;
},
parents: function(elem) {
return dir(elem, "parentNode");
},
parentsUntil: function(elem, until) {
return dir(elem, "parentNode", until);
}
}, function(name, fn) {
ajQuery[name] = function(until, selector) {
return fn(until, selector);
};
});
$("#test1").click(function() {
var item = $('.item-1');
alert(item.parent()[0])
alert(item.parents().length)
alert(item.parentsUntil('body').length)
})
$("#test2").click(function() {
var item = document.querySelectorAll('.item-1')[0]
alert(ajQuery.parent(item))
alert(ajQuery.parents(item).length)
alert(ajQuery.parentsUntil(item, 'body').length)
})
</script>
</body>
</html>
.each()使用方法
这个比较简单了，想要学习参考这个网址吧：http://api.jquery.com/each/,不做详细讲解
本文参考：
jQuery API ：http://api.jquery.com/jquery.each/