jQuery如何获取子元素

最新推荐文章于 2021-02-03 16:44:09 发布

原创最新推荐文章于 2021-02-03 16:44:09 发布 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQurey 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了jQuery中find()与children()方法的区别，find()用于获取元素下的所有子集元素，而children()仅获取直接子集元素。通过具体实例展示了两者在元素查找上的不同行为。

jQuery获取子元素的方式有两种：find()和children()，但二者有差异，下面看看二者的差异：
1.children()方法：获取该元素下的直接子集元素
2.find()方法：获取该元素下的所有子集元素

<ul id="ul">
        <li>
            list1
            <ul>
                <li>
                    list1-1
                </li>
                <li>
                    list1-2
                </li>
            </ul>
        </li>
        <li>
            list2
            <ul>
                <li>
                    list2-1
                </li>
                <li>
                    list2-2
                </li>
            </ul>
        </li>
        <li>
            list3
            <ul>
                <li>
                    list3-1
                </li>
                <li>
                    list3-2
                </li>
            </ul>
        </li>
    </ul>

3、children()方法获取最外层ul下面直接子集元素li：$("#ul").children(“li”)

需要注意的是，如果li元素下还有li元素，children方法将不会被获取。我们可以用length来测试获取的个数“$("#ul").children(“li”).length”，最后输出结果为3

4、find()方法获取ul下所有元素li：$("#ul").find(“li”)

需要注意的是，find方法会无限循环查找ul标签节点下的li，一直找到没有为止，用length来测试获取个数“$("#ul").find(“li”).length”，最后输出结果为9

5、children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止。