个人中心
gpt4 book ai didi

jQuery函数map()和each()介绍及异同点分析

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery函数map()和each()介绍及异同点分析由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

方法语法：map() 。

map(callback) 为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象的实例中。 参数 callback （函数）回调函数，为包装集中的每个元素调用该函数。 比如，下面的代码将页面上所有div元素的id值收集到一个javascript数组中:

  。

复制代码 代码如下:

var iDs = $("div").map(function(){
    return (this.id==undefined) ? null :this.id;
}).get();

  。

再看如下的表单中包含的一组 checkbox 框:

  。

复制代码 代码如下:

<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="text" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

  。

我们可以得到一个用逗号分隔的复选框 ID

  。

复制代码 代码如下:

$(':checkbox').map(function() {
return this.id;
}).get().join();

  。

此调用的结果是字符串， "two,four,six". 。

在回调函数中，this指向每次迭代中的当前DOM元素.

方法语法：each() 。

each(iterator) 遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数 iterator （函数）回调函数，为匹配集中的每个元素调用 each()方法也可以用来遍历javascript数组对象甚至单个对象，举个栗子:

  。

复制代码 代码如下:

$([a,b,c,d]).each(function(){
    alert(this);
})

  。

这个语句会为传入$()中数组的每个元素调用迭代函数，函数中的this指向单独的数组项.

每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素.

假设页面上有这样一个简单的无序列表.

  。

复制代码 代码如下:

<ul>
<li>foo</li>
<li>bar</li>
</ul>

  。

你可以选中并迭代这些列表:

  。

复制代码 代码如下:

$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});

  。

列表中每一项会显示在下面的消息中:

0: foo 1: bar 两者的区别 。

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象.

each()返回的是原来的数组，并不会新创建一个数组。 map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费.

最后此篇关于jQuery函数map()和each()介绍及异同点分析的文章就讲到这里了,如果你想了解更多关于jQuery函数map()和each()介绍及异同点分析的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： IDEA中进行Docker项目部署的实现步骤
文章推荐： 浅谈JS闭包中的循环绑定处理程序
文章推荐： js跨域问题浅析及解决方法优缺点对比
文章推荐： js 操作符汇总
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com