JQuery 遍历 操作数组 map、grep、filter 的区别
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
例如:
改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
注意:filter和find的区别
例如: $("div").filter(".rain"); 和 $("div").find(".rain");
find()会在div元素内寻找class为rain 的元素,是对它的子集操作
filter()则是筛选div的class为rain的元素,是对它自身集合元素筛选
$.grep() 函数使用指定的函数过滤数组中的元素,并返回过滤后的数组。
提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中。
语法
$.grep( array, function [, invert ] )
特别注意:Function类型 指定的过滤函数。grep()方法为function提供了两个参数:其一为当前迭代的数组元素,其二是当前迭代元素在数组中的索引。
例如: 输出 5,8
$(function () {
var arr =$.grep( [1,5,8], function(n,i){
return n > 4;
});
$( "p" ).text( arr.join( ", " ) );
})
$.grep() 根据条件过滤,所以函数中为bool类型的表达式,而map() 则是返回一个对象或者值;
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
get() 方法获得由选择器指定的 DOM 元素。 与 ajax - get() 方法 没有关系,两个不相关。
语法
$(selector).get(index)
例如:
获得第一个 p 元素的名称和值:
$("button").click(function(){
x=$("p").get(0);
$("div").text(x.nodeName + ": " + x.innerHTML);
});
或者:
$("button").click(function(){
x=$("p").eq(0);
$("div").text($(x).prop("tagName")+ ": " + $(x).html());
});
jQuery中get()和eq(的区别)
eq返回的是一个jquery对象 get返回的是一个html 对象数组
返回的是jQuery对象,就可以继续调用其他方法,返回的是html数组就不能调用jQuery的其他方法
例如:
$("ul li").get(1).css("color", "red"); //这个是错误的
$("ul li").eq(1).css("color", "red"); //这个是正确的
Jquery的获取元素标签名称的方法:
$( this ).prop("nodeName")
jQuery DOM 元素方法
| 函数 | 描述 |
|---|---|
| .get() | 获得由选择器指定的 DOM 元素。 |
| .index() | 返回指定元素相对于其他指定元素的 index 位置。 |
| .size() | 返回被 jQuery 选择器匹配的元素的数量。 |
| .toArray() | 以数组的形式返回 jQuery 选择器匹配的元素。 |
JQuery 遍历 操作数组 map、grep、filter 的区别的更多相关文章
- Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...
- JQuery遍历json数组的3种方法
这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...
- jquery遍历集合&数组&标签
jquery遍历集合&数组的两种方式 CreateTime--2017年4月24日08:31:49Author:Marydon 方法一: $(function(){ $("inp ...
- JS002. map( ) 和 filter( ) 的区别和实际应用场景(递归函数、深度优先搜索DFS)
在开发过程中难免会碰到省市区级联的操作,一般后端人员是不愿意将中文储存在数据库的. 由于应用页面较多,我们在通过区域Code写查字典函数时应该注意函数的 时间复杂度 / 空间复杂度. 如果用三层for ...
- jquery遍历对象,数组,集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
- jquery遍历筛选数组的几种方法和遍历解析json对象
jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var fil ...
- jQuery 遍历 (each、map)
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. jQuery 遍历函数 jQuery ...
- 【转】 jquery遍历json数组方法
$(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...
- jQuery遍历Json数组
var jsonArray= [{ "name": "张三", "password": "123456"},{ &qu ...
随机推荐
- 使用JavaScript实现量化策略并发执行
本文代码和文章发在FMZ发明者比特币量化交易平台上: 使用JavaScript实现量化策略并发执行--封装Go函数 - 发明者量化 https://www.fmz.com/digest-topic/3 ...
- IdentityServer4学习笔记汇总(实现传送门在底部)
前言 互联网时代,对信息和资源的保护越发苛刻,在所有应用中授权和认证是必不可少缺少的一部分.如果一个应用没有授权和认证那么这个应用就是不完整或者说不安全的应用.在.Net平台给我们提供了一套完整的授权 ...
- 最新 二三四五java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.二三四五等10家互联网公司的校招Offer,因为某些自身原因最终选择了二三四五.6.7月主要是做系统复习.项目复盘.Leet ...
- Sping 补充完成修改功能
1.视图层完整示例 <form action="#" th:action="@{/update/{id}(id=${user.id})}" th:obje ...
- Java基础---Java常量
常量:在程序运行期间不变的量 分类: 类型 含义 数据举例 整数常量 所有整数 0,1, 567, -9 小数常量 所有小数 0.0, -0.1, 2.55 字符常量 单引号引起来,只能写一个字符, ...
- C/C++内存知识(一)
一.C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)- 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. 2.堆区(heap)- 由程序 ...
- MySQL之锁、事务、优化、OLAP、OLTP
本节目录 一 锁的分类及特性 二 表级锁定(MyISAM举例) 三 行级锁定 四 查看死锁.解除锁 五 事务 六 慢日志.执行计划.sql优化 七 OLTP与OLAP的介绍和对比 八 关于autoco ...
- 笔记-10:处理时间的标准库-time库
1.time库介绍 主要用来处理时间的标准库. time库提供了系统级精确计时器的计时功能,可以用来分析程序性能,也可让程序暂停运行时间. time库的功能主要分为:时间处理.时间格式化.计时. 2. ...
- PAT(B) 1020 月饼(Java)
题目链接:1020 月饼 (25 point(s)) 分析 将月饼(库存量,总售价,单价)封装成MoonCake类 Scanner会超时,用BufferedReader类读取数据 读取的时候用字符串数 ...
- shell习题第25题:判断是否开启web服务
[题目要求] 写一个脚本判断我的linux服务器是否开启web服务?监听80端口 [核心要点] netstat -lntp | grep '80' [脚本] #!/bin/bash n=`netsta ...