c语言编程笔录

首页 >   > 笔记大全

笔记大全

jQuery中怎么进行遍历 几种遍历方式

更新时间：2023-09-14

jQuery遍历方法介绍

在开发中，我们经常需要遍历元素，比如获取某个元素的所有子元素或者将某个元素的属性更改。这时候，jQuery就可以派上用场。jQuery提供了多种遍历方法，本文将介绍其中几种

find()方法

find()方法可以从一个元素的后代元素中找到具有指定标签名或类名等属性的元素。注意，find()函数只会通过当前元素下级的所有后代元素，无法通过父级追溯上去寻找元素

    
        <div id="parent">
            <ul class="list">
                <li>列表项1</li>
                <li>列表项2</li>
            </ul>
            <p class="info">一行信息</p>
        </div>
        <script>
            $(document).ready(function() {
                var $list = $("#parent").find(".list");
                var $info = $("#parent").find(".info");
            });
        </script>

children()方法

children()方法可以从一个元素的所有直接后代元素中找到具有指定标签名或类名等属性的元素。相比于find()方法，它只会找到直接子元素，而不是后代元素

    
        <div id="parent">
            <ul class="list">
                <li>列表项1</li>
                <li>列表项2</li>
            </ul>
            <p class="info">一行信息</p>
        </div>
        <script>
            $(document).ready(function() {
                var $list = $("#parent").children(".list");
                var $info = $("#parent").children(".info");
            });
        </script>

eq()方法

eq()方法可以选中匹配到的元素集合中的指定索引位置的元素，并以新的集合形式返回该元素

    
        <ul class="list">
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <script>
            $(document).ready(function() {
                var $item = $(".list li").eq(1);
            });
        </script>

filter()方法

filter()方法可以过滤匹配到的元素集合，返回符合指定条件的元素集合。可以使用选择器、回调函数等方式对元素进行过滤

    
        <ul class="list">
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <script>
            $(document).ready(function() {
                var $items = $(".list li").filter(":contains('1')");
            });
        </script>

图文推荐