jQuery 遍历
.add()
add() 方法将元素添加到匹配元素的集合中
.add(selector)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。
.add(elements)//添加到匹配元素集合的一个或多个元素
.add(html)//添加到匹配元素集合的 HTML 片段
.add(jQueryObject)//添加到匹配元素集合的已有 jQuery 对象
.add(selector, context)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式;选择器开始进行匹配的位置。
$("div").css("border", "2px solid red")
.add("p")
.css("background", "yellow");//找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色
.andSelf()
把堆栈中之前的元素集添加到当前集合
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");//找到所有 div,以及其中的所有段落,并为它们添加两个类名。请注意,由于未使用 .andSelf(),div 没有黄色背景色
<ul>
<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>
$("li.third-item").nextAll().andSelf()
.css("background-color", "red");//代码的结果是项目 3,4,5 拥有红色背景
首先,初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后,调用 .andSelf() 会合并这两个集合,所创建的 jQuery 对象指向按照文档顺序的所有三个项目:{[<li.third-item>,<li>,<li> ]}
个人理解:把之前匹配道德集合和当前集合合并在一起
.children()
$("div").children(".selected").css("color", "blue");//找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色
.children(selector)//字符串值,包含匹配元素的选择器表达式
返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤
.find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。
与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
.closest()
.closest(selector)//closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});//当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景
.parents() 和 .closest() 方法
| .closest() | .parents() |
|---|---|
| 从当前元素开始 | 从父元素开始 |
| 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
| 返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
.contents()
.contents()
获得匹配元素集合中每个元素的子节点,包括文本和注释节点
$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");//找到段落中的所有文本节点,并用粗体标签包装它们
.each()
$(selector).each(function(index,element))//each() 方法为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环
index - 选择器的 index 位置;element - 当前的元素(也可使用 "this" 选择器)
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});//输出每个 li 元素的文本
.end()
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');//把所有方法调用串联在一起
.eq()
.eq(index)将匹配元素集缩减值指定 index 的一个
$("body").find("div").eq(2).addClass("blue");//通过为 index 为 2 的 div 添加适当的类,将其变为蓝色
.filter()
将匹配元素集合缩减为匹配指定选择器的元素
.filter(selector)//字符串值,包含供匹配当前元素集合的选择器表达式
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");//改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框
.find()
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选
.find(selector)
$("p").find("span").css('color','red');//搜索所有段落中的后代 span 元素,并将其颜色设置为红色
.first()
first() 将匹配元素集合缩减为集合中的第一个元素
$("p span").first().addClass('highlight');//高亮显示段落中的第一个 span
.has()
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集
.has(selector)//字符串值,包含匹配元素的选择器表达式
$('li').has('ul').css('background-color', 'red')
该调用的结果是,项目 2 的背景被设置为红色,这是因为该项目是后代中唯一拥有 <ul> 的 <li>
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。
.is()
.is(selector) 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true
var isFormParent = $("input[type='checkbox']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);//返回 false,因为 input 元素的父元素是 p 元素,若改为.parents(),则true
.last()
last() 将匹配元素集合缩减为集合中的最后一个元素
$("p span").last().addClass('highlight');//高亮显示段落中的最后一个 span
.map()
.map(callback(index,domElement))//把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );//构建表单中所有值的列表
.next()
.next(selector)//next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素
$("p").next(".selected").css("background", "yellow");//查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>选中每个<p>的后一个元素,即第二个<p>和<div>
.nextAll()
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。.nextAll(selector)
$("div:first").nextAll().addClass("after")//查找第一个 div 之后的所有类名,并为他们添加类名
.nextUntil()
nextUntil() 获得每个元素所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素 .nextUntil(selector,filter) .nextUntil(element,filter) selector 字符串值,包含指示在何处停止匹配跟随的同胞元素的选择器表达式。
element 指示在何处停止匹配跟随的同胞元素的 DOM 节点或 jQuery 对象。
filter 字符串值,包含用于匹配元素的选择器表达式。 $("#term-2").nextUntil("dt").css("background-color", "red");
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "blue");一个参数查找跟随 <dt id="term-2"> 的同胞元素,直到下一个 <dt>,然后将它们设置为红色背景色。两个参数同时,找到跟随 <dt id="term-1"> 的 <dd> 同胞元素,直到 <dt id="term-3">,并为它们设置蓝色文本颜色。
.not()
.not(element)
.not(selector)
$("p").not("#selected")//从包含所有段落的集合中删除 id 为 "selected" 的段落
.offsetParent()
offsetParent() 获得被定位的最近祖先元素//类似position: relative;
$('li.item-a').offsetParent().css('background-color', 'red');//设置类名为 item-a 的 li 元素的最近定位父元素的背景色
.parent()
.parent(selector)//parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的
$("p").parent(".selected")//查找每个段落的带有 "selected" 类的父元素
.parents()
.parents(selector)//获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的
$("b").parents()//查找每个 b 元素的所有父元素
.parentsUntil()
.parentsUntil(selector,filter)
.parentsUntil(element,filter)
$("li.item-a").parentsUntil(".level-1")
.css("background-color", "red");
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
.css("border", "3px solid blue");//查找 <li class="item-a"> 的祖先元素,直到 <ul class="level-1">,并将它们设置为红色背景。同时,找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素,直到 <ul class="level-1">,然户为它们设置蓝色边框
在 .level-1中查找 item-a的父元素,但查找结果不包括 .level-1的内容
.prev()
.prev(selector)//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的
$("p").prev(".selected")//检索每个段落,找到类名为 "selected" 的前一个同胞元素
.prevAll()
.prevAll(selector)//prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素,使用选择器进行筛选是可选的
$("div:last").prevAll().addClass("before");//定位最后一个 div 之前的所有 div,并为它们添加类
.prevUntil()
.prevUntil(selector, filter)
.prevUntil(element, filter)
prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素,但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素 $("#term-2").prevUntil("dt").css("background-color", "red");
var term1 = document.getElementById('term-1');
$("#term-3").prevUntil(term1, "dd").css("color", "green");
查找 <dt id="term-2"> 之前的同胞元素,直到前一个 <dt>,并将它们设置为红色。同时,查找 <dt id="term-3"> 前面的 <dd> 同胞,直到 <dt id="term-1">,并把它们设置为蓝色文本 $("#term-2").prevUntil("dt"),两个之间,不包括本身
$("#term-3").prevUntil(term1, "dd") #term-3前面的dd同胞,直到term1(包括term1下的子元素)
.siblings()
.siblings(selector)
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的 $("p").siblings(".selected")//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素
.slice()
.slice(selector,end)//slice() 把匹配元素集合缩减为指定的指数范围的子集(基于 0 的整数值)
$("p").slice(, ).wrapInner("");
选中所有段落,然后将所选内容缩减为只包含第一和第二个段落
————————————————————各种找爹找儿子找同胞————————————————————
jQuery 遍历的更多相关文章
- 【转】 jquery遍历json数组方法
$(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...
- jQuery 遍历函数
转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...
- Jquery遍历选中的input标签
$("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...
- jquery遍历
http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...
- jQuery 遍历(上)
目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...
- jquery 遍历 数组1
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
- JQuery:JQuery遍历详解
JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- jquery遍历对象,数组,集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
- jQuery 遍历函数(w3school)
jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
随机推荐
- jQuery.each的function中有哪些参数(可以大概理解function中的参数问题)
1.没有参数 $("img").each(function(){ $(this).toggleClass("example"); }); 1 2 3 2.有一个 ...
- spring配置文件中属性mappingLocations、mappingDirectoryLocations
http://blog.csdn.net/vacblog/article/details/7774173
- Shell: extract more from listener.log(分析监听日志)
最近遇到了两起数据库连接数不足的问题, 通常都会预留一些会话增加的情况, 但在一些特殊情况下如连接风暴(logon storm), 如果在监听中没有做rate限流,对数据库来说巨大的冲击可能会导致数据 ...
- Java MD5校验
Java 生成MD5 MD5(Message Digest Algorithm),消息摘要算法,一般用于校验文件的完整性.Java内置已经实现了MD5,与SHA1算法,利用java.security. ...
- 网络编程(学习整理)---3--(Udp)FeiQ实现广播消息群发
1.广播群发消息: 这里使用的任然是UDP协议,使用方法还是比较简单的! 我就记录一下需要注意的一些地方(笔记): (1)这里是在局域网内,借用FeiQ聊天软件,编写一段程序,实现对局域网内的每一个登 ...
- Setup FTP Server On CentOS, RHEL, Scientific Linux 6.5/6.4/6.3
setsebool allow_ftpd_full_access onsetsebool -P ftp_home_dir on vsftpd (Very Secure File Transport P ...
- 一个简单的Hibernate工具类HibernateUtil
HibernateUtil package com.wj.app.util; import org.hibernate.Session; import org.hibernate.SessionFac ...
- HTML5 自适应rem布局
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
- wamp安装注意点!
安装wamp前或者重装系统后,默认没有依赖的组件VC11,需要先安装才能运行 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id= ...
- configure: error: Cannot find libmysqlclient under /usr Note that the MySQL client library is not bundled anymore! 报错解决
错误说明 今天在centos 6.3 64位版本上安装PHP5.4.3时在./configure 步骤的时候出现了下面错误configure: error: Cannot find libmysqlc ...