jquery遍历之后代

向下遍历dom树的jquery方法

  children()方法返回被选元素的所有直接子元素,只会对向下一级对dom树进行遍历。

例子

  

代码:

$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});

也可以可选参数进行过滤

  

代码:

$(document).ready(function(){
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
});

find()方法返回被选元素的后代元素,一路向下直到最后一个后代。

代码:

$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});

下面例子返回div所有后代

代码:

$(document).ready(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"});
});

水平遍历同胞

  siblings()返回被选元素的所有同胞元素。

例子

$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});

您也可以使用可选参数来过滤对同胞元素的搜索。

代码:$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});

next()方法返回被选元素的下一个同胞元素。只返回一个元素。

代码:

$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});

nextAll方法返回被选元素的所有跟随的同胞元素。

代码:

$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});

nextUntil方法返回介于两个给定参数之间的所有跟随的同胞元素。

代码:

$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});

prev(), prevAll() & prevUntil() 方法是向后遍历

过滤

  first(),last(),eq()允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first()方法返回被选元素的首个元素。

代码:

$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});

last() 方法返回被选元素的最后一个元素。

代码:

$(document).ready(function(){
$("div p").last().css("background-color","yellow");
});

eq() 方法返回被选元素中带有指定索引号的元素。

代码:

$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

代码:

$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});

not() 方法返回不匹配标准的所有元素。

提示:not() 方法与 filter() 相反。

代码:

$(document).ready(function(){
$("p").not(".url").css("background-color","yellow");
});

  

时间: 2024-10-27 12:43:34

jquery遍历之后代的相关文章

Web开发——JavaScript库(jQuery遍历——后代)

遍历图解: 1.jQuery 遍历 - 后代 后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 1.1 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children():返回被选元素的所有直接子元素.该方法只会向下一级对 DOM 树进行遍历. find():返回被选元素的后代元素,一路向下直到最后一个后代. 1.2 举例说明 举例1(children() 方法,下面的例子返回每个 <div> 元素的所有直接子元素

jQuery遍历

1. 下图展示了一个家族树.通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 图示解释: <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素

jquery遍历之children()与find()的区别

hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: [html] view plain

jQuery 遍历 - find() 方法

jQuery 遍历参考手册 实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("span").css('color','red'); 亲自试一试 定义和用法 find() 方法获得当前元素集合中每个元素的后代,通过选择器.jQuery 对象或元素来筛选. 语法 .find(selector) 参数 描述 selector 字符串值,包含供匹配当前元素集合的选择器表达式. 详细说明 如果给定一个表示 DOM 元素集合的 jQu

JQuery日记 6.3 JQuery遍历模块

jQuery.extend({ // 返回elem延DOM树某个方向访问的所有节点,直到遇到until条件 dir: function( elem, dir, until ) { var matched = [], truncate = until !== undefined; while ( (elem = elem[ dir ]) && elem.nodeType !== 9 ) { if ( elem.nodeType === 1 ) { if ( truncate &&am

jQuery 遍历函数

.add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态.

JQuery:JQuery遍历详解

JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止.jQuery 提供了多种遍历 DOM 的方法.下图展示了一个家族树.通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 图示解析:<div> 元素是

jQuery 遍历函数(w3school)

jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .en

jQuery遍历函数

jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .end(