jQuery トラバーサル メソッド
each()メソッド:
$.each(配列/オブジェクト, 関数処理); //$オブジェクトが呼び出されました
$(セレクター).each(関数処理); //jqueryオブジェクトが呼び出されました
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//① 遍历对象
//$.each(对象,function(k对象属性变量,v对象属性值变量){});
var cat = {name:'kitty',age:5,climb:function(){console.log('在爬树');}};
jQuery.each(cat,function(k,v){
console.log(k+'---'+v);
});
//② 遍历数组
//$.each(数组,function(k元素下标变量,v元素值变量){});
var color = ['red','blue','green'];
jQuery.each(color,function(m,n){
console.log(m+'---'+n);
});
}
window.onload = function(){
//③ 遍历"jquery对象"
//$('li').each(function(w dom对象下标索引值,f代表具体的每个dom对象){});
$('li').each(function(w,f){
//this代表遍历出来的每个“dom对象”
//this ----> f
//this ----> li对象(dom对象)
console.log(w+"---"+f+"---"+this);
f.style.color = "blue";
});
}
</script>
<style type="text/css">
div {width:300px;height:200px; background-color:pink;}
</style>
</head>
<body>
<h2>each遍历方法</h2>
<div id="apple"></div>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<input type="button" value="触发1" onclick="f1()" />
</body>
</html>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
