跳转至

Jquery 遍历后代

write by 2019/6/15 12:20

1. 遍历

  后代是子、孙、曾孙等等。通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

2. 后代

遍历 DOM 树

  • children() 方法返回被选元素的所有直接子元素
  • find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

2.1 children

  children() 方法返回被选元素的所有直接子元素。该方法 仅仅只会向下一级 对 DOM 树进行遍历。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 * {
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div id="div2">div (我，你大爷)
            <p>只有自己强大，才不会被别人践踏。</p>
            <ul> ul(儿子元素)
                <p>最怕你一生碌碌无为，还是能安慰自己平凡可贵</p>
                <li>li(孙子元素)
                    <p style="color: darkgrey;text-align: center">怀揣着梦想，一路前行</p>
                </li>
            </ul>
        </div>
    </div>

</body>
<script>
    $(function () {
        $('#div2').children('p').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
children

2.2 find

 find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 * {
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div id="div2">div (我，你大爷)
            <p>只有自己强大，才不会被别人践踏。</p>
            <ul> ul(儿子元素)
                <p>最怕你一生碌碌无为，还是能安慰自己平凡可贵</p>
                <li>li(孙子元素)
                    <p style="color: darkgrey;text-align: center">怀揣着梦想，一路前行</p>
                </li>
            </ul>
        </div>
    </div>

</body>
<script>
    $(function () {
        $('#div2').find('p').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
childrens