jquery循环遍历中add\each\andSelf\eq\filter\map\slice方法的使用

最新推荐文章于 2020-11-20 20:48:02 发布
最新推荐文章于 2020-11-20 20:48:02 发布
阅读量770 收藏
点赞数
分类专栏： jquery JavaScript 随笔日记 文章标签： filter jquery 遍历 each map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36263601/article/details/72371095
版权
JavaScript 同时被 3 个专栏收录
34 篇文章 0 订阅
订阅专栏
随笔日记
14 篇文章 0 订阅
订阅专栏
jquery
10 篇文章 0 订阅
订阅专栏
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >jquery循环遍历练习 </ title >
< script src= "jquery-1.11.1.min.js" ></ script >
</ head >
< body >
< div id= "add" >
< div style= "width:100px;height:200px;" ></ div >
< p >1111 </ p >
</ div >

< button id= "each" >dianji </ button >
< ul class = "andSelf eq each" >
< li >list item 1 </ li >
< li >list item 2 </ li >
< li class= "third-item" >list item 3 </ li >
< li >list item 4 </ li >
< li >list item 5 </ li >
</ ul >

< ul id= "filter" >
< li >< strong >list </ strong > item 1 - one strong tag </ li >
< li >< strong >list </ strong > item < strong >2 </ strong >- two < span >strong tags </ span ></ li >
< li >list item 3 </ li >
< li >list item 4 </ li >
< li >list item 5 </ li >
< li >list item 6 </ li >
</ ul >

< form method= "post" action= "" id= "map" >
< 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= "checkbox" value= "8" id= "eight" name= "number[]" >
</ div >
</ fieldset >
</ form >
< ul id= "slice" >
< li >list item 1 </ li >
< li >list item 2 </ li >
< li >list item 3 </ li >
< li >list item 4 </ li >
< li >list item 5 </ li >
</ ul >
< script >
/*
add（）方法将元素添加到匹配元素的集合中
.add(selector) selector 字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。
.add(elements) elements 添加到匹配元素集合的一个或多个元素。
.add(html) html 添加到匹配元素集合的 HTML 片段。
.add(jQueryObject) jQueryObject    添加到匹配元素集合的已有 jQuery 对象。
.add(selector, context) selector  字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。 context  选择器开始进行匹配的位置。
*/
// $('div').css('border','2px solid red')
// .add('p')
// .css('background','yellow');

/*
andSelf()方法
把堆栈中之前的元素集添加到当前集合中

*/
// $('li.third-item').nextAll().andSelf().css('background-color','red');

/*
1、选择器+遍历
$('div').each(function (i){
i就是索引值
this 表示获取遍历每一个dom对象
});
2、选择器+遍历
$('div').each(function (index,domEle){
index就是索引值
domEle 表示获取遍历每一个dom对象
});
3、更适用的遍历方法
1）先获取某个集合对象
2）遍历集合对象的每一个元素
var d=$("div");
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});

对 jQuery 对象进行迭代，为每个匹配元素执行函数。
each() 方法规定为每个匹配元素规定运行的函数 ---》返回false 可用于及早停止循环
$(selector).each(function(index,element))
function(index,element) 必须。 为每个汽配元素规定运行的函数 index - 选择器的index 位置 element - 当前的元素（也可使用“this”选择器
*/
// $('button').click(function(){
// $('li').each(function(index,element){
// // alert($(this).text())
// $(element).text();
// })

// var data = $('.each li');
// $.each(data,function(index,element){
// alert($(this).text())
// })

// })

/*
将匹配元素集合缩减为位于指定索引的新元素。
eq(index) 方法将匹配元素集缩减值指定index 上的一个。
index    整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。
*/
// $('li').eq(2).css('background-color','red');
/*
将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素
.filter(selector) selector   字符串值，包含供匹配当前元素集合的选择器表达式。
如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。

*/
// $('li').filter(':even').css('background-color', 'red');

/*
使用过滤函数
使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。
*/
// $('li').filter(function(index,element){
// return $('strong',this).length == 1;
// }).css('background-color','red');

/*
把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的jquery对象
.map(callback(index,domElement)) callback(index,domElement) 对当前集合中的每个元素调用的函数对象。
详细说明
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：
*/
// var arr=$(':checkbox').map(function(index,element){
// // return element.id;
// return this.id;
// }).get().join(',');
// alert(arr);

/*
slice(selector,end) 将匹配元素集合缩减为指定范围的子集。
selector 基于 0 的整数值，指示开始选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。
end  基于 0 的整数值，指示结束选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。如果省略，则选取范围会在集合末端结束。
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.slice() 方法用匹配元素的子集构造一个新的 jQuery 对象。已应用的 index 参数集合中其中一个元素的位置；如果省略 end 参数，则 index 之后的所有的所有元素都会包含在结果中。
请思考这个带有简单列表的页面：
*/
// $('#slice li').slice(2).css('background-color','red');
// $('#slice li').slice(2,4).css('background-color','red');
</ script >
</ body >
</ html >
强哥blog
关注
专栏目录
浅谈jQuery中对象遍历.eq().first().last().slice()方法
12-11
在jQuery库中，遍历和选择元素是核心功能之一，今天我们将深入探讨四个重要的方法：`.eq()`, `.first()`, `.last()` 和 `.slice()`。这些方法在处理DOM元素集合时非常有用，能帮助开发者精确地定位和操作所需元素。 ...
jQuery中filter方法的简单使用
qq_42773229的博客
06-14 2027
1、举个简单的栗子：     我们想给select标签在页面初始化完成后设置一个默认值，咱们一般用简单的循环去实现元素节点的查找（比较浪费性能），当前可以通过jQuery选择器来实现（简单），下面我们用filter()方法来实现。 2、HTML代码： <select id="sel_check"> <option v...
jQuery 遍历 - filter() 方法
jiaxiaofeng521016的专栏
07-31 720
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。 详细说明 如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。 请思考下面这个拥有简单列表的页面： list item 1 list item 2
jquery遍历-filter()
diebaiying3731的博客
03-27 65
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;} div{ ...
jQuery 遍历 - eq() 和siblings() 方法
10-21 6604
eq() 方法将匹配元素集缩减值指定 index 上的一个。 通过为 index 为 2 的 div 添加适当的类，将其变为蓝色： div { width:60px; height:60px; margin:10px; float:left; border:2px solid blue; } .blue { background:blue; }
浅析jQuery 遍历函数，javascript中的each遍历
10-22
在数组中使用.each()函数的示例如下： ```javascript var arr = ["one", "two", "three", "four"]; $.each(arr, function() { alert(this); }); // 输出结果分别为：one, two, three, four var arr1 = [[1, 4, 3]...
使用JQuery选择HTML遍历函数的方法
11-25
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM...在实际项目中，结合其他jQuery方法和插件，可以实现更复杂的功能，增强用户体验。记住，合理使用这些工具，可以使你的JavaScript编程更加高效和便捷。
golang中range在slice和map遍历中的注意事项
09-19
### Golang中Range在Slice和Map遍历中的注意事项 #### Slice遍历的注意事项 在Go语言中，`range`关键字可以被用来遍历数组、切片（slice）、字符串、通道（channel）以及映射（map）。它提供了一种简洁的方式来...
Java遍历List、Map时添加、删除元素
SeeYouAgain的博客
06-04 7873
本文主要演示遍历List、Map时的添加、删除元素操作。 关于List和Map相关的遍历问题，笔者已在《Java常用数据结构基础知识总结(二)》一文中做了简要介绍，如有需要的可以参考，此处不再赘述。 源码如下： 1.基于List的操作 package com.ldl.cn.test; import java.util.ArrayList; import ...
jQuery对select遍历option（添加、移除）
没长正
04-29 2802
jquery 获取select值的情况有两种：一种是获得 select 的被选中的那个 option 的 value值，一种是获得 select 的被选中的那个 option 的 innerHTML（即包含在中的内容）,删除方法就更简单了直接使用remove,增加直接使用期append即可。 遍历option和添加、移除option 语法解释： 代码如下 复制代码
使用jquery 遍历函数-find()、eq()
热门推荐
冰冻三尺非一日之寒
01-23 1万+
使用jquery 遍历函数-find()、eq()         一、背景        遍历表格时，获取某列的值。       二、举例说明         1） html主要的框架 如下：       显示顺序
js 与jQuery 循环总结
冰河时代
09-09 600
$("img").each(function(i) { this.src = "images/crm/pic" + i + ".PNG" }); $.each($("img"), function(i, n) { n.src = "images/crm/pic" + i + ".PNG" }) //for (var 变量 in 对象) var imgs = document.getE
for循环List＜map＞add时，出现错误
yangxu19992的博客
11-20 467
在某个项目中用到了两个for循环(暂时不考虑其他因素)，在内层循环中要操作数据，然后加入到一个list中，在取出的时候，从第二条数据开始就出现错误：$ref": "$.returnData[0].ruleList[0]。 for (PageData sku : list) { List<Gift> listAll = orderGoodsGiftMapper.listAll(pdSku); if (null != listAll && !lis.
jQuery元素筛选方法详解：从eq()到siblings()
25. **add()** 和 **andSelf()** - 分别用于将其他元素添加到当前选择的元素集合中，以及将当前元素包含在内，便于一次性的操作。 26. **end()** - 用于重置选择器，恢复到选择器之前的状态。 27. **contents()** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值