您的位置：首页 > Web前端 > JQuery

jquery each

2015-08-07 22:44 621 查看

每次用时都是有点晕乎乎的，今天做了下总结。

通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

参数：

object,[callback]Object,FunctionV1.0

object:需要例遍的对象或数组。

callback:每个成员/元素执行的回调函数。

示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.3.min.js"></script>
<style>
li{border: 1px solid #ddd;padding:10px;}
</style>
</head>
<body>
<div>test</div>

<script>

var data=[
{
id: "5",
topicName: "北京工业大学",
topicRemark: " 创建于1960年，位于北京市朝阳区平乐园100号。 ",
isCare: "0"
},
{
id: "7",
topicName: "北京化工大学",
topicRemark: "北京化工学院，1994年更名为北京化工大学。 ",
isCare: "1",
careId: "6889"
},
{
id: "11",
topicName: "清华大学",
topicRemark: "诞生于1911年，因北京西北郊清华园得名。 ",
isCare: "1",
careId: "6890"
},
{
id: "14",
topicName: "浙江大学",
topicRemark: " 前身是1897年创建的求是书院，是中国最早创办的现代高等学府之一。 ",
isCare: "1",
careId: "6899"
}]
$(function(){
//data是一个自定义JSON对象
$.each(data,function(i,item){//i索，item={} 一个JSON对象 item.id ,item.topicName

if(item.id==11){
return false; //跑出循环体
}

console.log("编号："+item.id+"—— 索引:"+i);
console.log("大学："+data[i].topicName);
console.log("编号："+data[i].id)
})

//$("#ul li") jQuery对象
$("#ul li").each(function(i,item){//item=>HTMLLIElement
/*i索引 item=>li标签元本素 item.innerHTML 转换jQuery对象 $(item)*/
console.log($(this).text()+"--"+i+"--"+item.innerHTML+"--"+item.getAttribute("name")+"--"+$(item).attr("haha"));
})

$.each( { name: "John", lang: "JS" }, function(i, n){//i索引 n值
console.log( "Name: " + i + ", Value: " + n );
});

var arr=['aaa','bbb','ccc','ddd'];
$.each(arr,function(i,value){//i索引 value值
console.log(i+"--"+value+"--"+arr[i]) //0--aaa--aaa
})
})
</script>

<ul id="ul">
<li id="aaaa" name="test1" haha="haha1">1111</li>
<li id="bbbb" name="test2" haha="haha2">2222</li>
<li id="cccc" name="test3" haha="haha3">33333</li>
<li id="dddd" name="test4" haha="haha4">4444</li>
<li id="eeee" name="test5" haha="haha5">5555</li>
</ul>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航