jQuery 遍历 - find() 方法
jQuery 遍历 - find() 方法
定义和用法
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
语法
.find(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含供匹配当前元素集合的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。
.find() 方法第一个明显特征是,其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。
请思考下面这个简单的嵌套列表:
<ul class="level-1"><li class="item-i">I</li><li class="item-ii">II<ul class="level-2"><li class="item-a">A</li><li class="item-b">B<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li></ul></li><li class="item-c">C</li></ul></li><li class="item-iii">III</li> </ul>
我们将从列表 II 开始来查找其中的列表项:
$('li.item-ii').find('li').css('background-color', 'red');
这次调研的结果是,项目 A、B、1、2、3 以及 C 均被设置了红色背景。即使项目 II 匹配选择器表达式,它也不会被包含在结果中;只会对后代进行匹配。
与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。
选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
对于 jQuery 1.6,我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表,我们首先这样写:
var $allListElements = $('li');
然后将这个 jQuery 对象传递给 find 方法:
$('li.item-ii').find( $allListElements )
;
上面的代码会返回一个 jQuery 集合,其中包含属于列表 II 后代的列表元素。
类似地,也可以传递一个元素:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 )
.css('background-color', 'red');
这次调用的结果是项目 1 被设置为红色背景。
转自w3school
jQuery 遍历 - find() 方法相关推荐
- jquery遍历多个li_21个jQuery遍历节点方法详解
本篇教程介绍了21个jQuery遍历节点方法详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 1.children()方法:$('div').children( ...
- jQuery 遍历 - closest() 方法
jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...
- jQuery 遍历 - children() 方法
jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...
- jQuery 遍历 - slice() 方法
实例 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落: .slice(0, 2) 亲自试一试 定义和用法 slice() 把匹配元素集合缩减为指定的指数范围的子集. 语法 .slice(se ...
- jQuery 遍历 - prev() 方法
定义和用法 prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的. .prev(selector) 参数 描述 selector 字符串值,包含用于匹配元素的选择器 ...
- html遍历map,jQuery 遍历map()方法详解
一.定义和用法 map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 二.语法 .map(callback(index,domElement)) 三.详细说明 ...
- jQuery 遍历 each()方法
输出每个 li 元素的文本: $("button").click(function(){ $("li").each(function(){ alert($(th ...
- jQuery 遍历 - siblings()方法
查找每个 p 元素的所有类名为 "selected" 的所有同胞元素: $("p").siblings(".selected") 转载于:h ...
- jquery遍历节点的方法
jquery遍历节点方法总结: 后代遍历 children()方法返回被选元素的所有直接子元素. find()方法返回被选元素的后代元素,一路向下直到最后一个后代. 祖先遍历 parent()方法返回 ...
- jquery遍历多个li_jQuery使用each遍历循环的方法
1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function ...
最新文章
- Sentinel 高可用流量管理框架
- java esp_在我的ESP游戏方法中非法开始表达
- js代码计算济南出租车打车费用
- 初识机器学习——吴恩达《Machine Learning》学习笔记(八)
- Word 2007怎样生成目录
- Flutter进阶第2篇:Dio库实现网络请求以及动态渲染数据
- MariaDB链接超时优化
- 韩国NF(耐福)数字音频功放芯片系列大全
- 【Quant】80+面试,5个offer,Quant大神总结分享各家quant面试题
- 电脑运行MATLAB直接关机,Matlab相关-----matlab跑完程序后自动关机
- Java实现增删改查系统代码(全~纯干货)
- G 蛋白偶联受体与小分子化合物的相互作用
- android自定义彩虹,Android彩虹菜单
- OSGi跨bundle调用,jaxb-impl异常
- 计算机类sci四大水刊,医学sci中的四大水刊,你知道吗
- 关键帧提取——帧差法提取关键帧(2)
- 如何使用MongoDB Go驱动程序在MongoDB中使用Go
- [转]Project2010简易操作指南
- python海龟绘图颜色_Python中的高级turtle(海龟)作图(续)
- 合创视觉科技平面设计师的职业路线