jQuery 遍历 - map() 方法和get()

最新推荐文章于 2021-08-30 22:54:15 发布

z_黑桃白菜

最新推荐文章于 2021-08-30 22:54:15 发布

阅读量404

点赞数

分类专栏： jquery

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery 遍历 - map() 方法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

jQuery下有个概念叫“类数组”，比如$( " li " )，当取到一个集合的时候，会有数组的一些属性，但是instancseof Array仍然是false。但是var a=$( "li" ).get（）这样处理一下，然后instancseof Array就返回true。

要注意var a=$( “li” ).get（1）里头加序列号可以取到单个元素，这些元素的性质不是jQuery对象，而是Js对象，所以不可直接用jQuery方法。

 map（）的功能主要有两步，第一步就是遍历，第二步就是替换。

$( " li " ).map( function(  ){

return  $(this).text(  );  // 注意return关键字不可少
} )

map先遍历，每一项都返回一个text（）值，然后map会将这些值自动去替换 ("li")集合的每一项值，所以这个时候还是个类数组（因为还是 (” li “)的壳子），不是个真正的数组。于是后面加个get（）操作就变成真正的数组了，于是可以用join（）这样专属于数组的方法。

.map(callback(index,domElement))
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
 
 1
2
 
 1
2

实例

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
     <input type="text" name="url" value="http://baidu.com"/>
  </form>

<script>
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>

</body>
</html>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这里写图片描述

z_黑桃白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 遍历 - map() 方法和get()

jQuery 遍历 - map() 方法map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。jQuery下有个概念叫“类数组”，比如$( " li " )，当取到一个集合的时候，会有数组的一些属性，但是instancseof Array仍然是false。但是var a=$( "li" ).get（）这样处理一下，然后instancseof
复制链接

扫一扫