当前位置：&>&&>&
jQuery中使用$.each()遍历array数据，map集合等操作
时间： 15:08:01    来源：服务器之家    投稿：root
1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:DDD传入数组
&!DOCTYPE html&
src=”/jquery-latest.js”&&/script&
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:DDD如果一个映射作为集合使用,回调函数每次传入一个键-值对
&!DOCTYPE html&
src=”/jquery-latest.js”&&/script&
var map = {
‘flammable’: ‘inflammable’,
‘duh’: ‘no duh’
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
flammable: inflammable
duh: no duh
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
内容来自17jquery
//例子:DDD回调函数中 return false时可以退出$.each(), 如果返回一个非false
即会像在for循环中使用continue 一样, 会立即进入下一个遍历
&!DOCTYPE html&
& div { color: }
& div#five { color: }
& &/style&
src=”/jquery-latest.js”&&/script&
& &div id=”one”&&/div&
& &div id=”two”&&/div&
& &div id=”three”&&/div&
& &div id=”four”&&/div&
& &div id=”five”&&/div&
&&& var arr = [ "one", "two", "three", "four",
"five" ];//数组
&&& var obj = { one:1, two:2, three:3, four:4,
five:5 }; // 对象
&&& jQuery.each(arr, function() {& // this
&&&&& $(“#” + this).text(“Mine is ” +
this + “.”);& // this指向为数组的值, 如one, two
&&&&&& return (this != “three”);
// 如果this = three 则退出遍历
&&& jQuery.each(obj, function(i, val) {& //
i 指向键, val指定值
&&&&& $(“#” +
i).append(document.createTextNode(” C ” + val));
Mine is one. C 1
Mine is two. C 2
Mine is three. C 3
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:DDD遍历数组的项, 传入index和value
&!DOCTYPE html&
一起jquery,17jquery
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:DDD遍历对象的属性,传入 key和value
&!DOCTYPE html&
src=”/jquery-latest.js”&&/script&
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
正自评论的例子:
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1. 如果不想输出第一项 (使用retrun true)进入 下一遍历
&!DOCTYPE html&
src=”/jquery-latest.js”&&/script&
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
// equivalent to ‘continue’ with a normal for loop
// else do stuff…
alert (index + “: “+ value);
2.一个级联下拉框的例子
$(function(){
&&&function&objInit(obj)&{//下拉列表框初始化
&&&&&&&&&&&&&&return&$(obj).html("&option&请选择&/option&");
&&&&&&&&&&}
&&&&&&&&&&var&arrData&=&{&//定义一个数组保存相关数据
&&&&&&&&&&&&&&厂商1:&{&品牌1_1:&"型号1_1_1,型号1_1_2",&品牌1_2:&"型号1_2_1,型号1_2_2"&},
&&&&&&&&&&&&&&厂商2:&{&品牌2_1:&"型号2_1_1,型号2_1_2",&品牌2_2:&"型号2_2_1,型号2_2_2"&},
&&&&&&&&&&&&&&厂商3:&{&品牌3_1:&"型号3_1_1,型号3_1_2",&品牌3_2:&"型号3_2_1,型号3_2_2"&}
&&&&&&&&&&};
&&&&&&&&&&$.each(arrData,&function(pF)&{&//遍历数据增加厂商项
&&&&&&&&&&&&&&$("#selF").append("&option&"&+&pF&+&"&/option&");
&&&&&&&&&});
&&&&&&&&&&$("#selF").change(function()&{&//厂商列表框选项改变事件
&&&&&&&&&&&&&&objInit("#selT");
&&&&&&&&&&&&&objInit("#selC");
&&&&&&&&&&&&&&$.each(arrData,&function(pF,&pS)&{
&&&&&&&&&&&&&&&&&&if&($("#selF&option:selected").text()&==&pF)&{&//如果厂商选中项与数据匹配
&&&&&&&&&&&&&&&&&&&&&&$.each(pS,&function(pT,&pC)&{&//遍历数据增加品牌项
&&&&&&&&&&&&&&&&&&&&&&&&&&$("#selT").append("&option&"&+&pT&+&"&/option&");
&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&$("#selT").change(function()&{&//品牌列表框选项改变事件
&&&&&&&&&&&&&&&&&&&&&&&&&&objInit("#selC");
&&&&&&&&&&&&&&&&&&&&&&&&&&$.each(pS,&function(pT,&pC)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&($("#selT&option:selected").text()&==&pT)&{&//如果品牌选中项与数据匹配
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$.each(pC.split(","),&function()&{&//遍历数据增加型号项
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$("#selC").append("&option&"&+&this&+&"&/option&");
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&});
&&&&&&&&&&});
&&&&&&&&&&$("#Button1").click(function()&{&//注册按钮单击事件
&&&&&&&&&&&&&var&strValue&=&"您选择的厂商:";
&&&&&&&&&&&&&&strValue&+=&$("#selF&option:selected").text();
&&&&&&&&&&&&&&strValue&+=&"&您选择的品牌:";
&&&&&&&&&&&&&&strValue&+=&$("#selT&option:selected").text();
&&&&&&&&&&&&&&strValue&+=&"&您选择的型号:";
&&&&&&&&&&&&&&strValue&+=&$("#selC&option:selected").text();
&&&&&&&&&&&&&&$("#divTip")
&&&&&&&&&&&&&&.show()
&&&&&&&&&&&&&&.addClass("clsTip")
&&&&&&&&&&&&&&.html(strValue);&//显示提示信息并增加样式
&&&&&&&&&});
&&&&&&&&})
转载请注明原文地址：jquery each遍历list_jquery+each+遍历list
jquery+each+遍历list
以下内容已过滤百度推广
最佳答案: var list = [{}];$(list).each(function(i, ele){ for(var k in ele){ csnoole.log(k + &: & + ele[k]); }});&&百度知道
日&-&jquery each遍历json jquery each遍历元素 for each遍历list .each遍历list jquery的each遍历方法 js遍历list集合 each jquery each 倒序遍历 jquery ...&&普通
&&列表－模版
日&-&src=&jquery.min.js &&
$(function(){ var tbody = &&; //---遍历list集合 .each的使用--- var obj =[{&name &:&项海军&,&password &:&123456...&&普通
jquery 遍历参考手册 实例 输出每个 li 元素的文本: $(&button&).click(function(){ $(&li&).each(function(){ alert($(this).text()) }); });
日&-&jquery.each(data.roomlist, function(i,item){
alert(item.id+&,&+item.name);
error: function(){
}); 分享...&&普通
日&-&jquery 遍历函数 ,javascript中的each遍历 jquery 遍历函数 jquery 遍历函数包括了...
嗨,第一层评论
jquery ajax后台向前台传list 前台用jquery $.each遍历list来源网络,如有侵权请告知,即处理! 编程tags: asp 数据库 java javascript php jsp c/c++ 服务器 linux...&&普通
日&-&jquery中each可用于遍历对象和数组,如需退出each循环可使回调函数返回false,下面有个示例,大家可以看看&&普通
日&-&jqueryajaxjsonlisteach 下边是两种前台接收并遍历list
$.ajax({ type: 'post', url: xxx.action', datatype: 'text', success: function(data){ var...&&普通
出自近似词猜&正规性权威性5地理位置网址标题|网址|摘要F0内容略分类信息&|&猜&非正规提权略略略精确匹配1内容略分类信息&|&猜&非正规提权略略略精确匹配2内容略分类信息&|&猜&非正规提权略略略精确匹配3内容略分类信息&|&猜&非正规提权略略略精确匹配4内容略分类信息&|&猜&非正规提权略略略精确匹配5内容略分类信息&|&猜&非正规提权略略略精确匹配6内容略分类信息&|&猜&非正规提权略略略精确匹配7内容略分类信息&|&猜&非正规提权略略略精确匹配8内容略分类信息&|&猜&非正规提权略略略精确匹配9内容略分类信息&|&猜&非正规提权略略略精确匹配10
12时间限制猜&实时动态5相关检索词泛时效性8F1略略略略百度知道略略略1略略略略略略略略2略略略略略略略略3略略略略略略略略4略略略略略略略略5略略略略略略略略6略略略略略略略略7略略略略略略略略8略略略略略略略略9略略略略略略略略10
url2345摘要前标题后标题F2略略略略略元描述略1略略略略略正文略2略略略略略正文略3略略略略略正文略4略略略略略正文略5略略略略略正文略6略略略略略正文略7略略略略略正文略8略略略略略元描述略9略略略略略正文略10
结果23原创猜&网址形式6相关词猜&相似度F3略略略略子页优先级较低略略精确匹配1略略略略子页优先级较低略略精确匹配2略略略略子页优先级较低略略精确匹配3略略略略主页次优先&|&子页内容充实略略精确匹配4略略略略子页优先级较低略略精确匹配5略略略略子页优先级较低略略精确匹配6略略略略子页优先级较低略略精确匹配7略略略略子页优先级较低略略精确匹配8略略略略子页优先级较低略略精确匹配9略略略略子页优先级较低略略精确匹配10& $.each(obj,function(key,val){&&&&& if($.isPlainObject(val) || $.isArray(val)){&&&&&&&&& subObj(val);&&&&& }else{&&&&&&&&& alert(key+'='+val);&&&&& }& });
您可能感兴趣的文章：1 &!DOCTYPE html&
&META http-equiv=Content-Type content="text/ charset=utf-8"&
&title&each嵌套 - by 杨元&/title&
&h1&each嵌套&/h1&
&!--基础html框架--&
&div id="dataList"&&/div&
&!--插件引用--&
&script type="text/javascript" src="script/jquery.js"&&/script&
&script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"&&/script&
&!--Handlebars.js模版--&
&!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--&
&!--id可以用来唯一确定一个模版,type是模版固定的写法--&
&script id="table-template" type="text/x-handlebars-template"&
{{#each this}}
{{#each info}}
{{../name}}的{{this}}&br&
&!--进行数据处理、html构造--&
&script type="text/javascript"&
$(document).ready(function() {
//模拟的json对象
var data = [{
"name":"张三",
"name":"李四",
//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = pile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#dataList').html(myTemplate(data));
56 &/html&
&&&&&&&&& 循环嵌套在稍微复杂点的页面设计中即会涉及，Handlebars.js完全支持each嵌套，可以在each中使用each。
&&&&&&&&& 上边的例子演示了两个关键点：each嵌套的可实现性、如何在each嵌套中读取父each中的数据。
&&&&&&&&& 例子很简单，info本身是一个信息列表，是属于某个人的，我们先用each遍历所有的人，然后再遍历每个人的info信息，这样就形成了each嵌套。但是我们想在内层each中获取外层each的数据，达到&谁的什么&这样的显示效果。
&&&&&&&&& 显然，如果直接在内层each中使用{{name}}，是取不到任何数据的，因为内层each的上下文是info，而name属性在表示人的上下文中。
&&&&&&&&& 此时，可以用{{../name}}从内层each获取上一级each的name属性，语法和html的路径表示一样，简单吧？
阅读(...) 评论()