Jquery 遍历数组之$().each方法与$.each()方法介绍

最新推荐文章于 2024-01-24 15:58:46 发布
最新推荐文章于 2024-01-24 15:58:46 发布
阅读量1w 收藏
点赞数
分类专栏： 前端-Javascript 前端-Javascript系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24549805/article/details/72904818
版权

$().each()

对于这个方法，在dom处理上用的比较多,如果一个html页面上面有多个checkbox，这时用$().each来处理checkbox是比较不错的;

$("input[type='checkbox']").each(function(i){
   $(this).attr("checked",true);
});

回调函数里面的i在此处代表input集合传递过去的索引(也就是正在遍历的input元素的索引)；

但是这段代码只用到了input集合的索引


<head>
    <title></title>
    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('input:hidden').each(function (index, obj) {
                alert(obj.name + "..." + obj.value);
            });
        });
    </script>
</head>
<body>
<input type="hidden" value="1" name="a"/>
<input type="hidden" value="2" name="b"/>
<input type="hidden" value="3" name="c"/>
</body>

上面这段代码用到了input集合的索引,有用到了input集合的dom对象,可以通过该对象,拿到其对应的属性如：name，value等；

$.each()方法

1. 该方法处理一维数组,代码如下:

$.each(["aaa","bbb","ccc"],function(index,value){
     alert(i+"..."+value);
});

结果是输出  0...aaa   1...bbb   2...ccc

 

2.该方法处理二维数组,代码如下：


        $(function () {
            $.each([["aaa", "bbb", "ccc"], ["ddd", "eee", "fff"], ["ggg", "hhh", "iii"]], function (index, item) {
                alert(index + "..." + item);
                //输出0...aaa,bbb,ccc  1...ddd,eee,fff  2...ggg,hhh,iii   这时的index为数组下标,item相当于取这二维数组中的每一个数组
                $.each(item, function (index, itemobj) {
                    alert(index + "....." + itemobj);
                });
            });
            //输出0...aaa,bbb,ccc  0...aaa 1...bbb 2...cccc  1...ddd,eee,fff  0...ddd 1...eee 2...fff  2...ggg,hhh,iii 0...ggg 1...hhh 2...iii
        });

 

3.该方法处理json数组,代码如下:


        $(function () {
            var json = [{ name: "张三", sex: "男" }, { name: "李四", sex: "女" }, { name: "王五", sex: "gay"}];  //自定义一个json数组
            $.each(json, function (index, obj) {
                alert(index + "..." + obj.name+"..."+obj.sex);
            });
        });

 

json为后台传递过来的json数组，each遍历该数组,index通常为数组里面对象的索引,而obj为当前遍历到的对象

JAVA破局之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
11-27
$().each() 对于这个方法，在dom处理上用的比较多,如果一个html页面上面有多个checkbox，这时用$().each来处理checkbox是比较不错的; $("input[type='checkbox']").each(function(i){ $(this).attr("checked",true...
JQuery $.each遍历JavaScript数组对象实例
10-25
声明了一个JSON字符串直接遍历，在Chrome控制台下面报错，解决方法是将JSON字符串转换为JavaScript对象
JQ-$.each()方法使用
wang704987562的博客
07-15 1万+
jQuery的$.each()函数是全局函数，用于循环遍历jQuery对象的每个元素，它对于多元素DOM操作，循环任意数组和对象属性非常有用。 除了这个函数之外，jQuery还提供了一个具有相同名称的辅助函数，可以在不事先选择或创建DOM元素的情况下调用它。 语法 $.each(object,[callback]); 参数 object :需要遍历的对象或数组。 callback：每个...
jquery的each()详细介绍
u011674641的博客
08-19 822
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等 在javaScript开发过程中使用$each可以大大的减轻我们的工作量。 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ...
jQuery遍历（树遍历）
最新发布
m0_59329828的博客
01-24 916
获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
jQuery的each方法
weixin_44552244的博客
06-27 1万+
开发工具与关键技术：Visual Studio / each方法的应用 作者：郑名方 撰写时间：2019年6月 25日 为什么说jQuery中有个重要的方法.each()，因为大部分jQuery方法在内部都会调用.each，其中主要的原因就是jQuery的实例是一个元素集合。它可以找到所以“div”，并且都设置样式，css类只是一个方法，所以内部会调用.each()方法处理这个div的集合，给每...
前端代码|循环遍历数组函数： js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解
wj的博客
12-09 2613
文章目录JavaScript forEach() 方法1. 定义和用法：注意:2. 语法：参数：3. 返回值：undefined4. 示例：jQuery 遍历 - each() 方法1. 定义和用法：2. 语法3. 示例3.1 $(selector).each(function(index,element)) 函数示例：3.2 $.each(dataresource,function(index,element)) 函数示例：JavaScript Array map() 方法1. 定义和用法注意：2. 语法
Jquery 遍历数组之$().each方法与$.each()方法介绍
weixin_34255055的博客
07-04 365
$().each() 对于这个方法，在dom处理上用的比较多,如果一个html页面上面有多个checkbox，这时用$().each来处理checkbox是比较不错的; $("input[type='checkbox']").each(function(i){ $(this).attr("checked",true); }); 回调函数里面的i在此处代表input集合传递过...
jQuery 遍历方法总结
忧郁的蛋的专栏
03-16 7476
5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。
JQuery遍历方式
you4580的专栏
03-22 749
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)1. jquery对象.each(function(index,element){});true:如果当前function返回为false，则结束循环(break)。element：就是集合中的每一个元素对象。jq对象.each(callback)index:就是元素在集合中的索引。this：集合中的每一个元素对象。for(元素对象 of 容器对象)2. jq的遍历方式。2. jq的遍历方式。
jQuery学习一（foreach，each，map）
Wu_JingYi0829的博客
09-18 3788
jQuery学习一（foreach，each，map） 相关名词解释： $.each() 方法为每个匹配元素规定要运行的函数。 $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。 伪数组：jQuery对象是一个伪数组，伪数组就是有0到length-1的属性，并且有length属性。 1.原生foreach方法和利用jquery的each静态方法的区别 var arr = [1, 3, 5, 7, 9]; var obj = {0: 1, 1:
jQuery的三种遍历循环
热门推荐
思维小刀
06-03 3万+
0.总述 for循环 $.each for in 1.简述 $.each(object,function(index,e){ ... }); object --> 需要遍历的对象或数组 index --> 索引 e --> 循环的每个元素 2.代码 <!DOCTYPE html> <html> <b...
jQuery通用的全局遍历方法$.each()用法实例
10-22
主要介绍了jQuery通用的全局遍历方法$.each()用法,结合实例形式分析了$.each()方法实现遍历功能的相关技巧,需要的朋友可以参考下
jQuery使用$.each遍历json数组的简单实现方法
10-22
主要介绍了jQuery使用$.each遍历json数组的简单实现方法,结合实例形式分析了each方法遍历json数组的实现技巧与相关注意事项,需要的朋友可以参考下
前端上传组件Plupload使用以及IE下注意的问题
anzy/pine的博客
06-12 7554
Plupload有以下功能和特点： 1、拥有多种上传方式：flash、HTML5、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。 2、支持以拖拽的方式来选取要上传的文件 ...
高德地图 javascript 输入提示后查询
anzy/pine的博客
10-07 6932
HTML DOM addEventListener() 方法
anzy/pine的博客
01-10 6208
element.addEventListener(event, function, useCapture) 参数 描述 event 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event
ExtJs 常用方法(alert confirm prompt show wait)
anzy/pine的博客
09-25 4423
1、alert方法 // 提示框 Ext.MessageBox.alert("提示信息","hello world!!!"); Ext.Msg.alert('ExtJs'); alert('执行'); 注：执行到ExtJs中的alert方法不会停止运行。不同于原生的js alert方法 2、confirm方法 //询问框 Ext.Msg.confirm('提示信
jQuery1. 作为⼀般函数调⽤: $(param) 1). 参数为函数 : 当DOM加载完成后，执⾏此回调函数 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装 成jQuery对象 3). 参数为DOM对象: 将dom对象封装成jQuery对象 4). 参数为html标签字符串 (⽤得少): 创建标签对象并封装成 jQuery对象 2. 作为对象使⽤: $.xxx() 1). $.each() : 隐式遍历数组 2). $.trim() : 去除两端的空格 需求1. 点击按钮: 显示按钮的⽂本, 显示⼀个新的输⼊框 需求2. 遍历输出数组中所有元素值 ["aaa", "bbb", "ccc"] 需求3. 去掉" my tic "两端的空格
05-29
回答： 1. 实现需求1的代码： ```javascript $('button').click(function(){ var btnText = $(this).text(); // 获取按钮的文本内容 alert(btnText); // 弹出按钮文本内容 $('body').append('<input type="text" />'); // 在body中添加一个新的输入框 }); ``` 2. 实现需求2的代码： ```javascript var arr = ["aaa", "bbb", "ccc"]; $.each(arr, function(index, value){ console.log(value); // 遍历输出数组中所有元素值 }); ``` 3. 实现需求3的代码： ```javascript var str = " my tic "; var newStr = $.trim(str); // 去掉字符串两端的空格 console.log(newStr); // 输出去掉空格后的结果 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值