版权声明:黄河爱浪,[email protected], https://blog.csdn.net/u013350495/article/details/82533549
本篇文章说一说与上篇文章《jQuery之美——数据遍历》中所提到的 $.each() 方法非常相似的方法 $.map(),$.map()也有数据筛选和元素筛选。
先说一下元素筛选:$(select).map(callback(index,domElement)),参数为一回调函数,回调函数支持2个参数,index(序号)和domElement(元素)。
功能:匹配当前集合中的每个元素,产生一个包含新的jQuery对象
设当前需求:获取当前已选中的复选框的值:
<!-- html -->
<form action="">
<input type="checkbox" checked value="web" name="demo">
<input type="checkbox" checked value="梦之蓝" name="demo">
<input type="checkbox" value="前端开发" name="demo">
</form>
<!-- js -->
var arr1=$("form>input[name='demo']").map(function () {
if($(this).is(":checked")){
return $(this).val();
}
});
console.log(arr1); //['web','梦之蓝']
数据筛选:$.map(object,callback(item,index),参数为一回调函数,回调函数支持2个参数,item(项)和index(序)。
功能:将一个数组中的所有元素转换到另一个数组中
设当前需求:找出当前数据中所有性别为“男”的用户姓名
<!-- js -->
var userList=[
{"name":"张三",sex:'男'},
{"name":"李四",sex:'男'},
{"name":"王五",sex:'女'},
{"name":"赵六",sex:'男'}
];
var arr2=$.map(userList,function (item,index) {
if(item.sex=='男'){
return item.name;
}
});
console.log(arr2); //['张三','李四','赵六']
为什么这次这两个方法一起讲呢,因为相对 $.each() 来说,$.map() 的使用频率相对要少些。本人是非常喜欢这个方法的,用起来非常方便。
下篇预告:jQuery之美——表单对象属性
更多精彩文章,敬请持续关注——WEB前端梦之蓝
用微信扫描下方的二维码可直接关注该公众号哦,或者打开微信公众号搜索 “web-7258”,关注后会在第一时间将最新文章推送给您哦