jquery中$each()
$.each():可用于遍历任何的集合(无论是数组或对象)
$(selector).each():专用于jquery对象的遍历,
如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数.
each的几种常用的用法
①一维数组:var
arr1 = [
"aaa"
,
"bbb"
,
"ccc"
];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
alert(i)将输出0,1,2
alert(val)将输出aaa,bbb,ccc
②一维数组:var
arr2 = [[
'a'
,
'aa'
,
'aaa'
], [
'b'
,
'bb'
,
'bbb'
], [
'c'
,
'cc'
,
'ccc'
]]
$.each(arr2, function(i, item){
alert(i);
alert(item);
});
//arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
//item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});
alert(j)将输出为0,1,2,0,1,2,0,1,2
//将会输出每个数组的每个值
alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
实例:动态生成树
后台返回的是一个二维数组
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<ul class="nav" id="menus"> </ul>
<span id="liMsg"></span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajax({
type:'POST',
url: '/ZAdmin/MenuHandler.ashx',
data: {action:'rootMenu'},
dataType:'json',
success: function (data) {
if (data.Status == 200) {
var htmlLi = "";
$.each(data.Data, function (i, item) {
htmlLi +='<li>';
$.each(item, function (j, val) {
if (j == 'menu_name') {
htmlLi+='<a>' + val + '</a>';
}
});
htmlLi+='</li>';
$('#menus').html(htmlLi);
});
} else {
$('#liMsg').text('异常');
}
},
error: function (errorThrown) {
jQuery('#liMessage').val('网络通讯异常');
return false;
}
})
});
</script>
这块遇到一个问题,由于我是动态拼数据,当我用append()时,不能追加到临时变量上,试了很多方法,转成jquery对象也不行
后来只能把动态生成的数据写在临时变量中然后用html()往里插入
jquery中$each()的更多相关文章
- jQuery中的end()
要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部 ...
- jquery中的get和set
jquery中通过参数的个数来判断是get方法还是set方法: css: function(name, value ) { return value !== undefined ? jQuery.st ...
- jQuery基础之(二)jQuery中的$
在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuer ...
- jQuery中$.post()的使用
$.post()方法是jquery本身对ajax的一个简单封装,其效果等价于: $.ajax({ url:url, type:"POST", data:data, dataType ...
- jQuery中的&& ||
jQuery1.2.6 clean方法中有这么一段第一眼看去会让人晕掉的方法.完全不知其所言. “||, && 可以这样用?”,“这段东西最终返回的是个什么对象啊?” // Trim ...
- jquery 中的 this 和 $(this)
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法 $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值. 亦即: ...
- Ajax跨域原理及JQuery中的实现
浅析Ajax跨域原理及JQuery中的实现分析 AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...
- jquery 中 this 的范围
jquery 中的 this button 通常会存在 onclick;// input[type='file'] 会存在 onchange 事件 eg: onclick = " del ...
- 【从0到1学jQuery】jQuery中each()和$.each()的使用
引子: 最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作.所以就查看了jQuery关于这个函数的文档,并且总结一下. 演示代码如下: <div& ...
- JSONP原理及jQuery中的使用
JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON ...
随机推荐
- Android高效加载大图
通过BitmapFactory的decode方法设置特定的options缩小图片到指定尺寸 1:通过加载设置了只编码图片边界options的图片,获取原图的尺寸和类型 2:计算图片需要缩小的倍数 3: ...
- 1 ERP管理系统概念
1 ERP管理系统概念 一.ERP是什么? ERP是企业资源计划(Enterpise Resource Planning)的简称,蕴含现代企业管理理念,其核心是在制造资源计划基础上进一步发展而成的面向 ...
- SpringMVC(五)@RequestHeader和@CookieValue
通过使用@RequestHeader获取请求头 通过使用@CookieValue获取cookie值 代码: 1: @Controller 2: public class TestHeader_Cook ...
- mysql出错ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)
其他的贴会教你 1.键盘上win+r 2.输入cmd 3.输入net start mysql 但是还是没用 你可以试试 1.右击开始菜单 2.点击windows PowerShell(i) 3.输入 ...
- 很详尽KMP算法(厉害)
作者:July时间:最初写于2011年12月,2014年7月21日晚10点 全部删除重写成此文,随后的半个多月不断反复改进.后收录于新书<编程之法:面试和算法心得>第4.4节中. 1. 引 ...
- Windows自调试Redis
一.安装Redis 1. Redis官网下载地址:http://redis.io/download,下载相应版本的Redis,在运行中输入cmd,然后把目录指向解压的Redis目录. 2.启动服务命令 ...
- webstorm + babel
网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. 我使用的是webStorm2017.1版本. babel安装准备 使用webStorm自带的filewatcher ...
- C#通过SendMessage发送消息,改变其他程序的下拉框控件(ComboBox)的值
IntPtr cbh= new IntPtr(handle); //ComboBox的句柄 SendMessage(cbh, 0x014D, new IntPtr(-1), "需要选中的下拉 ...
- Elasticsearch 入门 - Exploring Your Cluster
The REST API Cluster Health ( http://localhost:9200/ ) curl -X GET "localhost:9200/_cat/health? ...
- oracle 创建自增主键
1.创建表 create table Test_Increase( userid number(10) NOT NULL primary key, /*主键,自动增加*/ username varch ...