Access denied | api.jquery.com used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (api.jquery.com) has banned your access based on your browser's signature (4cd6db4-ua98).jQuery 遍历 - find() 方法
jQuery 遍历 - find() 方法
搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
$(&p&).find(&span&).css('color','red');
定义和用法
find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
.find(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&
&li class=&item-c&&C&/li&
&li class=&item-iii&&III&/li&
我们将从列表 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 被设置为红色背景。jQuery初学:find()方法及children方法的区别分析
转载 & & 作者：
总经一下前段时间用于的jQuery方法：find及children。需要的朋友可以参考下。
首先看看英文解释吧： children方法：find方法：通过以上的解释，可以总结如下： 1：children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。 2：children方法获得的仅仅是元素一下级的子元素，即：immediate children。 3：find方法获得所有下级元素，即：descendants of these elements in the DOM tree 4：children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。 5：find方法事实上可以通过使用 jQuery( selector, context )来实现：英语如是说：Selector context is implemented with the .find() therefore, $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii'). 例如，有以下html元素： 使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是： 使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具网上有很多，这里介绍三种：
第一种方法，就是使用id，这个方法可以在生成html的时候动态设置tr的id，也是用得最多最简单的一种，如下：
&tr&&td&这行不隐藏&/td&&/tr&
&tr id="tr_1"&&td&这行要隐藏&/td&&/tr&
&tr id="tr_2"&&td&这行要隐藏&/td&&/tr&
那么控制显隐可以直接使用
for(var i = 1; i & tr_ i++){ //tr_len是要控制的tr个数
$("#tr_"+i).hide();
第二种方法，是使用$.each()，这个方法需要设置table的id，如下：
&table id="Tbl"&
&tr&&td&这行不隐藏&/td&&/tr&
&tr&&td&这行要隐藏&/td&&/tr&
&tr&&td&这行要隐藏&/td&&/tr&
那么控制显隐可以直接使用
$.each($("#Tbl tr"), function(i){
if(i & 0){
this.style.display = 'none';
第三种方法，是通过属性筛选器，这个方法需要给tr加上某个特定属性，比如class，如下：
&table id="Tbl"&
&tr&&td&这行不隐藏&/td&&/tr&
&tr&&td class="hid"&这行要隐藏&/td&&/tr&
&tr&&td class="hid"&这行要隐藏&/td&&/tr&
那么控制显隐可以直接使用
var trs = $("tr[class='hid']");
for(i = 0; i & trs. i++){
trs[i].style.display = "none"; //这里获取的trs[i]是DOM对象而不是jQuery对象，因此不能直接使用hide()方法
就这么简单。如果是要显示的话，把相应的方法改成show()或者display属性改为”"即可
实际应用：
说明：默认情况下，只显示“对应页面名称”所在行，当点击单选按钮时，显示不同的行。
&td class="tr_title_edit"&&label for="f_navname"&对应页面链接&font color="red"&*&/font&&/label&&/td&
class="tr_content_edit"&
&input type="radio" id="f_inner"
name="f_navState" value="1" checked="checked" /&&label for="f_inner"&内部链接&/label&
&input type="radio" id="f_outer"
name="f_navState" value="2" /&&label for="f_outer"&外部链接&/label&&/td&
&tr id="il" style="display:block"&
&td class="tr_title_edit"&&label for="f_pagename"&对应页面名称&/label&&/td&
class="tr_content_edit"&&select name='f_pageid' id="f_pageid"&
&option value=""&&/option&
&option value=""&新闻&/option&
&option value=""&通知&/option&
&/select&&/td&
&tr id="ol" style="display:none"&
&td class="tr_title_edit"&&label for="f_navname"&外部链接&/label&&/td&
class="tr_content_edit"&&input type="text" class="inputLine" size="40" id="f_outsidelink"
name="f_outsidelink" /&&/td&
通过id控制隐藏和显示如下：
$("input[name='f_navState']").click(function(){
//if($("input[name='f_navState']").attr("checked")==true){
$("input[name='f_navState']").each(function(i){
if(this.checked){
var f_navState = $("input[name='f_navState']")[i].
//获得单选框的值
if(f_navState==1){
//alert(123);
$("#il").show();
$("#ol").hide();
//alert(456);
$("#ol").show();
$("#il").hide();
浏览 44293
哥们儿你那循环确定没有问题吗？&&& $(function(){&&&
for(var i=1;i&3;i++){&&&
$("#id"+i).hide(); }});这样可以，你那样写的我没搞出来~就是这种用法，我tr_len就是tr的个数
浏览: 228587 次
来自: 湖北
你好，能否提供一下具体的实例呢？
我这里，加不加？wsdl都是可以了，楼主误导人了吧。。
曦阳向上 写道哥们儿你那循环确定没有问题吗？
哥们儿你那循环确定没有问题吗？
$(function() ...
想问个问题：
//比较service调用的值是否与设定的值相同 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'jQuery遍历节点-find()方法使用说明
jQuery遍历节点-find()方法使用说明
| 时间： 20:25:30 | 阅读数：
[导读] find()方法在jquery是匹配元素的后代元素中按照选择器表达式进行筛选,它可以根据传入的参数进入筛选遍历，下面我来给各位同学详细介绍。find(selector)此方法用于在匹配元素的后代元素中按照选择器表达式进行筛
find()方法在jquery是匹配元素的后代元素中按照选择器表达式进行筛选,它可以根据传入的参数进入筛选遍历，下面我来给各位同学详细介绍。
find(or)此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。记住：使用此方法必须得传入选择器表达式参数，不然是获取不到任何元素的，也就失去了使用此方法的意义了。我最近才想明白，利用方法如何找到一个元素中的所有的后代元素。使用这个.find()方法就可以轻松地做到。来看例子：
&div id=&level_one&& &&& 我是最外一层的div纯文本内容 &&& &div& &&&&&&& 我是第二层div的纯文本内容 &&&&&&& &span&jquery基础教程&/span& &&&&&&& &span class=&item&&jquery教程&/span& &&& &/div& &&& &div& &&&&&&& 我也是第二层div的纯文本内容 &&&&&&& &span class=&item&&PHP学习&/span& &&&&&&& &span&PHP教程&/span& &&& &/div& &/div&$(&#level_one&).find(&*&).//这个就是获取id为&level_one&的div中的所有的元素的个数，结果为6。 $(&#level_one&).find(&div&).//会获取到2个元素 $(&#level_one&).find(&span&).//会获取到4个元素 $(&#level_one&).find(&span.item&).//会获取到2个元素
&style&#level_one{width:240height:360border:2px solid #0000FF;padding:10float:left}#level_one div{width:200height:150border:1px solid #FF0000;margin:10}#level_one div span{float:width:150height:30border:1px solid #999000;margin:10}&/style&&div id=&level_one&&&我是最外一层的div纯文本内容&&div&&&我是第二层div的纯文本内容&&&span&jquery基础教程&/span&&&&span&jquery教程&/span&&&/div&&&div&&&我也是第二层div的纯文本内容&&&span&PHP学习&/span&&&&span&PHP教程&/span&&&/div&&/div&&input type=&button& id=&test1& value=&获取div#level_one的所有后代元素&&&input type=&button& id=&test2& value=&获取div#level_one的中的span&&&input type=&button& id=&test3& value=&获取div#level_one的中的div&&&script&$(function(){&$(&#test1&).click(function(){&&alert($(&#level_one&).find(&*&).length);&});&$(&#test2&).click(function(){&&alert($(&#level_one&).find(&span&).length);&});&$(&#test3&).click(function(){&&alert($(&#level_one&).find(&div&).length);&});})&/script&
其实上面的jquery代码和下面的jquery代码的效果是一样的。
$(&#level_one *&).//会获取到6个元素 $(&#level_one div&).//会获取到2个元素 $(&#level_one span&).//会获取到4个元素 $(&#level_one span.item&).//会获取到2个元素
&style&#level_one{width:240height:360border:2px solid #0000FF;padding:10float:left}#level_one div{width:200height:150border:1px solid #FF0000;margin:10}#level_one div span{float:width:150height:30border:1px solid #999000;margin:10}&/style&&div id=&level_one&&&我是最外一层的div纯文本内容&&div&&&我是第二层div的纯文本内容&&&span&jquery基础教程&/span&&&&span class=&item&&jquery教程&/span&&&/div&&&div&&&我也是第二层div的纯文本内容&&&span class=&item&&PHP学习&/span&&&&span&PHP教程&/span&&&/div&&/div&&font color=&#FF0000&&点击下面的button都是在id为level_one的div中筛选元素&/font&&br&&input type=&button& id=&test1& value=&获取所有后代元素的个数&&&br&&input type=&button& id=&test2& value=&获取span的个数&&&br&&input type=&button& id=&test3& value=&获取div的个数&&&br&&input type=&button& id=&test4& value=&获取class为item的span的个数&&&br&&script&$(function(){&$(&#test1&).click(function(){&&alert($(&#level_one *&).length);&});&$(&#test2&).click(function(){&&alert($(&#level_one span&).length);&});&$(&#test3&).click(function(){&&alert($(&#level_one div&).length);&});&$(&#test4&).click(function(){&&alert($(&#level_one span.item&).length);&});})&/script&
手机扫描下方二维码，关注php100官方微信。
同步官网每日更新，为您带来随时随地的资讯与技术信息。更有不定期的互动抽奖活动，赢取实用贴心的小礼物。
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
友情链接与合作伙伴
粤ICP备号-3