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,2alert(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()往里插入

时间: 2024-10-13 05:28:59

jquery中$each()的相关文章

jQuery基础之(二)jQuery中的$

在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的“$”作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>下的<a>

JQuery中的each()的使用

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理. jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素定州市科技工业局逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用. jQuery.prototy

JSONP原理及jQuery中的使用

JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON). JSON是一种数据格式,JSONP是一种数据调用方式. 1 //JSON 2 3 { 4 5 “name”: “sb” 6 7 } 1 //JSONP 2 3 callback({ 4 5 “name”: “sb” 6 7 }

【从0到1学jQuery】jQuery中each()和$.each()的使用

引子: 最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作.所以就查看了jQuery关于这个函数的文档,并且总结一下. 演示代码如下: <div> <ul> <li>你是第1个</li> <li>你是第2个</li> <li>你是第3个</li> <li>你是第4个</li> <li>你是第5个</li> </

jQuery中的end()

要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部维护着一个jQuery对象栈.每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中. 可能上面这句话让人读起来有些茫然,不要紧,我们来一个例子: <!DOCTYPE html> <html lang="en"> <he

jQuery 中的 each()

通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) { this;       //这里的this指向每次遍历中Object的当前属性值 p1; p2;     //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) $.each(Array, function(p1, p2){ this;       //这里的th

Hybrid App开发之Ajax在JQuery中的应用

前言: 今天学习一下如何通过Ajax与服务器进行交互,并且学习一下如何在JQuery中使用. 首先先了解一下什么是ajax? AJAX即"Asynchronous,Javascript+XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX=异步JavaScript和XML(标准通用标记语言的子集).AJAX是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情

Ajax在jQuery中的应用

Ajax是Asynchronous JavaScript and XML的缩写,其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作.在jQuery中,有大量的函数与方法为Ajax技术提供支持. 1.load()方法 load(url,[data],[callback]) 参数url为被加载的页面地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value.可选项[callback]参数

append和appendTo的区别以及appendChild用法 (一个是js中,另两个是jquery中)

append和appendTo的区别以及appendChild用法 作者: 字体:[增加 减小] 类型:转载 很多新手朋友们对append和appendTo的区别以及js中的appendChild用法有所模糊,下面就举例为大家详细介绍下,感兴趣的朋友不要错过 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>con

jquery中的each

$.each(Array, function(i, value) { this;                                    //this指向当前元素 i;                                       //i表示Array当前下标 value;                                //value表示Array当前元素 }); each处理一维数组 var arr1 = [ "aaa", "bb