jQuery遍历节点-find()方法使用说明

来源:互联网 时间:1970-01-01

find()方法在jquery是匹配元素的后代元素中按照选择器表达式进行筛选,它可以根据传入的参数进入筛选遍历,下面我来给各位同学详细介绍。

find(selector)

此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。

记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了。

我最近才想明白,利用jquery方法如何找到一个元素中的所有的后代元素。使用这个.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("*").length;//这个就是获取id为“level_one”的div中的所有的元素的个数,结果为6。
$("#level_one").find("div").length;//会获取到2个元素
$("#level_one").find("span").length;//会获取到4个元素
$("#level_one").find("span.item").length;//会获取到2个元素

例1

 代码如下 复制代码

<style>
#level_one{width:240px;height:360px;border:2px solid #0000FF;padding:10px;float:left}
#level_one div{width:200px;height:150px;border:1px solid #FF0000;margin:10px;}
#level_one div span{float:left;width:150px;height:30px;border:1px solid #999000;margin:10px;}
</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 *").length;//会获取到6个元素
$("#level_one div").length;//会获取到2个元素
$("#level_one span").length;//会获取到4个元素
$("#level_one span.item").length;//会获取到2个元素

exp1

 代码如下 复制代码

<style>
#level_one{width:240px;height:360px;border:2px solid #0000FF;padding:10px;float:left}
#level_one div{width:200px;height:150px;border:1px solid #FF0000;margin:10px;}
#level_one div span{float:left;width:150px;height:30px;border:1px solid #999000;margin:10px;}
</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>




相关阅读:
Top