.each() 完成后调用 jQuery 函数

JS

使用jQuery的.each()函数是一种非常方便的方式来遍历一个集合中的元素，并对每个元素执行相同的操作。这个函数接受一个回调函数作为参数，该回调函数将在每个元素上执行。在回调函数中，可以使用jQuery函数来操作当前元素，以及执行其他需要的操作。

在下面的例子中，我们将演示如何使用.each()函数来遍历一个包含多个列表项的无序列表，并将每个列表项的文本内容输出到控制台。

html
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
    <ul id="myList">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
    <script>
        $(document).ready(function(){
            $("#myList li").each(function(index){
                console.log("列表项" + (index + 1) + ": " + $(this).text());
            });
        });
    </script>
</body>
</html>

在这个例子中，我们首先使用jQuery选择器选择id为"myList"的无序列表。然后，我们使用.each()函数来遍历每个列表项，并在回调函数中将列表项的文本内容输出到控制台。在回调函数中，参数index表示当前元素在集合中的索引，$(this)表示当前的列表项。

通过运行这个例子，我们将在控制台中看到以下输出：

列表项1: 第一项
列表项2: 第二项
列表项3: 第三项

在实际应用中，.each()函数可以用于执行各种操作，例如修改元素的样式、添加事件监听器等。无论是处理单个元素还是集合中的多个元素，使用.each()函数都可以轻松地完成任务。

使用.each()函数遍历元素并执行操作

使用jQuery的.each()函数可以方便地遍历一个集合中的元素，并对每个元素执行相同的操作。这个函数接受一个回调函数作为参数，该回调函数将在每个元素上执行。在回调函数中，可以使用jQuery函数来操作当前元素，以及执行其他需要的操作。

下面的例子演示了如何使用.each()函数来遍历一个包含多个图片的列表，并为每个图片添加一个点击事件监听器，以在点击时显示图片的路径。

html
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
    <style>
        .image {
            width: 200px;
            height: 200px;
            object-fit: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="imageList">
        <li><img class="image" src="image1.jpg" alt="Image 1"></li>
        <li><img class="image" src="image2.jpg" alt="Image 2"></li>
        <li><img class="image" src="image3.jpg" alt="Image 3"></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("#imageList img").each(function(){
                $(this).click(function(){
                    var imagePath = $(this).attr("src");
                    console.log("点击了图片：" + imagePath);
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，我们首先使用jQuery选择器选择id为"imageList"的无序列表。然后，我们使用.each()函数来遍历每个列表项中的图片，并为每个图片添加一个点击事件监听器。在点击事件的回调函数中，我们使用$(this)来引用当前点击的图片元素，并使用.attr()函数获取图片的src属性值，即图片的路径。最后，我们将图片的路径输出到控制台。

通过运行这个例子，我们可以在控制台中看到在点击每个图片时输出了相应的路径。

使用.each()函数可以轻松地遍历元素集合并执行相应的操作。无论是处理单个元素还是集合中的多个元素，都可以使用.each()函数来完成任务。这使得处理和操作元素变得非常方便，提高了开发效率。