JQuery查找子元素find和遍历集合each的方法总结

JQuery查找子元素find()和遍历集合each的方法总结

在开发前端网页时，使用jQuery可以方便地处理DOM元素。其中，查找子元素和遍历集合是经常用到的操作。本文主要讲解jQuery中的find()方法和each()方法的使用。

一、JQuery find()方法

1.1 find()方法概览

jQuery中的find()方法可以根据选择器查找匹配元素的所有后代元素。

语法： $(selector).find(childSelector)

其中，selector是要查找的祖先元素，childSelector是要查找的子元素的选择器，如果不填childSelector，则返回selector所有后代元素。

1.2 find()方法实例

示例1-查找某个元素的直接后代元素

//HTML代码
<p class="parent">
    <p>第一段</p>
    <p>
        <span>第二段嵌套</span>
    </p>
</p>

//JavaScript代码：查找class为parent的p的直接后代元素p
$(".parent").find("p").css("background-color", "red");

示例2-查找某个元素所有后代元素

//HTML代码
<p class="parent">
    <p>第一段</p>
    <p>
        <span>第二段嵌套</span>
    </p>
</p>

//JavaScript代码：查找class为parent的p的所有后代元素
$(".parent").find("*").css("background-color", "yellow");

二、JQuery each()方法

2.1 each()方法概览

jQuery中的each()方法可以用来遍历查找到的元素集合。

语法： $(selector).each(function(index, element))

其中，selector是要遍历的元素集合，function是遍历时要执行的回调函数，参数index表示元素在集合中的序号，element表示当前遍历到的元素。

2.2 each()方法实例

示例3-遍历某个元素所有后代元素

//HTML代码
<p class="parent">
    <p>第一段</p>
    <p>
        <span>第二段嵌套</span>
    </p>
</p>

//JavaScript代码：遍历class为parent的p的所有后代元素
$(".parent").find("*").each(function(index, element) {
    console.log(index + ": " + element.nodeName);
});

通过上面三个实例的演示，我们可以看到，find()方法和each()方法在遍历DOM元素时非常有用，可以大大简化开发操作。同时，在实际项目中，我们需要综合运用各种方法来处理不同的DOM元素，以达到最优的效果。