jQuery 后代元素
使用 jQuery，您可以遍历 DOM 树以查找元素的后代。
后代是子级、孙级、曾孙级等等。
向下遍历 DOM 树
下面是两种用于遍历 DOM 树的 jQuery 方法:
children()find()
jQuery children() 方法
children() 方法返回所选元素的所有直接子元素。
此方法只遍历 DOM 树下的一个级别。
下面的示例返回每个 <div> 元素的直接子元素:
实例
<!DOCTYPE html><html><head><style>.descendants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("div").children().css({"color": "red", "border": "2px solid red"});});</script></head><body><div class="descendants" style="width:500px;">div (当前元素)<p>p (子级)<span>span (孙级)</span></p><p>p (子级)<span>span (孙级)</span></p></div></body></html>
您还可以使用可选参数筛选子项搜索。
下面的实例返回所有类名为 "first" 的 <p> 元素，它们是 <div>:
实例
<!DOCTYPE html><html><head><style>.descendants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("div").children("p.first").css({"color": "red", "border": "2px solid red"});});</script></head><body><div class="descendants" style="width:500px;">div (当前元素)<p class="first">p (子级)<span>span (孙级)</span></p><p class="second">p (子级)<span>span (孙级)</span></p></div></body></html>
jQuery find() 方法
find() 方法返回所选元素的子元素，一直到最后一个子元素。
下面实例返回所有的 <div> 的后代 <span> 元素:
实例
<!DOCTYPE html><html><head><style>.descendants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("div").find("span").css({"color": "red", "border": "2px solid red"});});</script></head><body><div class="descendants" style="width:500px;">div (当前元素)<p>p (子级)<span>span (孙级)</span></p><p>p (子级)<span>span (孙级)</span></p></div></body></html>
下面的实例返回 <div> 的所有后代:
实例
<!DOCTYPE html><html><head><style>.descendants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("div").find("*").css({"color": "red", "border": "2px solid red"});});</script></head><body><div class="descendants" style="width:500px;">div (当前元素)<p>p (子级)<span>span (孙级)</span></p><p>p (子级)<span>span (孙级)</span></p></div></body></html>
jQuery 遍历参考
有关所有 jQuery 遍历方法的完整概述，请访问本站的 jQuery 遍历参考。