jQuery后代遍历总结

四世同堂的喜事可不是每一个人都能遇得到的。每个家族中都会有家长也会有后代，后代的包含的对象除了子代还包含孙代以及后续说有的代。我国传统文化中就包含有“尊老爱幼”的美德，根据相对论来讲，我们每个人都会成为先辈，也都是其他先辈的后代。

高级形态的智慧生物人为什么会从哺乳动物这一支进化而来，不是没有任何道理的。长期的哺乳活动能促进母亲和后代之间的交流，家庭的基础就是建立在这个之上。很难想象如果人一出生就想羚羊一样撒开腿就能跑，估计人和自己的母亲就不会有那么深的感情。家庭也会变得很不稳定，人类社会的基石就会动摇。巴拉巴拉说了这么多就为了引出后代这个概念。

母猪在给小猪喂奶

虽然在生物界后代的概念无比重要，代表了基因的顺利传递。在jQuery中后代的意义只不过是DOM模型的层级的差异，虽然没有生物学中的意义重要，但是如果我们想要像操作自己手臂一样的操作DOM，后代遍历的方法我们还是要掌握理解的。

以前的文章《jQuery祖先遍历总结》中介绍了在jQuery中祖先遍历的三种方法，我们使用这些方法能在DOM中任意的向上层的节点“移动”查找上级元素。这篇文章就总结下如何在DOM向下层的节点“移动”查找下级元素，即后代遍历。

jQuery后代遍历的方法有两个比祖先遍历少了一个。它们分别是children()和find()。我们先来说下children()方法。

children()方法的作用是返回所选元素的所有直接子元素。这里面的直接子元素就意味着，我们children()方法只能向下移动一级遍历。

举例说明问题：

//jquery code

$(document).ready(function(){

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

//让div的下一级子元素的字体颜色和边框颜色成红色；

});

//html code

<div>div  (当前元素)
  <p>p  (子)
    <span>span  (孙)</span>    
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p>
</div>

结果如下：

jquery children()方法demo

children()方法还可以选择“指定”的子元素。例如下面的代码就是在<div>的子元素中并选择出其中是<p class="active">的元素。如果只是子元素中的<p>没有添加任何类或者不含active类的<p>及子元素中非<p>的元素则不会被选中。

$(document).ready(function(){
  $("div").children("p.active");
});

介绍完了children()方法之后，就剩下一个find()方法了。足够聪明的你一定猜到了jQuery这么优秀的库，如果只能遍历下一级子元素，不然也太不灵活了，那么这个find()方法应该就是遍历所有后代元素的方法了。哈哈~太对了。children()方法就是返回被选元素所有后代元素，它威风凛凛一插到底，一直到被选元素分支中最后一个的后代元素。

//jquery code

$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
//让div的后代元素span的字体颜色和边框颜色成红色；
});

//html code
<div>div  (current element)
  <p>p  (子)
    <span>span  (孙)</span>    
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p>
</div>

结果如下：

jquery find()方法demo

find()方法同样能灵活的选择“指定”的后代元素，使用方式和上文中的children()是一样的。

简单的积木也能搭建雄伟的大桥，这些简单的方法就是组成实现复杂功能程序的基础零件。能灵活运用并理解它们的知识，绝对是我们提升自我过程中不小助力。目前我们已经盘点了祖先遍历和后代遍历，这两种方法已经可以让我们在DOM树中自由的上下“移动”选择我们想要操作的元素了。嘿嘿~是不是有点小兴奋啊？

(报告完毕！)