jQuery Misc each()方法

jQuery Misc each() 方法是 jQuery 提供的一个遍历方法，主要用于遍历 jQuery 对象中的每个元素并应用回调函数。本文将详细讲解该方法的用法及注意事项。

语法

jQuery Misc each() 语法：

$(selector).each(function(index, element))

参数说明：

• selector : 必选参数，用于指定要遍历的元素。
• function(index, element) : 必选参数，用于规定对于遍历出的每个元素要执行的函数。其中，index 为遍历出的元素的索引值，element 为遍历出的元素本身。

示例

示例一：遍历所有的 <li> 元素并添加样式

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<script>
$(document).ready(function(){
    $("li").each(function(){
        $(this).css("color", "red");
    });
});
</script>

在上述代码中，使用 $ 函数选择了所有的 <li> 元素，然后使用 each() 方法遍历每个元素并调用匿名函数，该匿名函数针对每个元素将颜色设置为红色。

示例二：遍历所有的表格行，并对每一行进行操作

<table>
    <tr><td>1</td><td>Alice</td></tr>
    <tr><td>2</td><td>Bob</td></tr>
    <tr><td>3</td><td>Carol</td></tr>
</table>

<script>
$(document).ready(function(){
    $("tr").each(function(index){
        if(index % 2 == 0){
            $(this).css("background-color", "lightgray");
        } else {
            $(this).css("background-color", "white");
        }
    });
});
</script>

在上述代码中，使用 $ 函数选择了所有的表格行，并使用 each() 方法遍历每行并调用匿名函数，该匿名函数根据行的索引值决定是否给该行添加灰色背景颜色。

注意事项

• each() 方法的回调函数中的 this 指向当前遍历的元素本身，因此可以使用 $(this) 对该元素进行操作。
• each() 方法中的回调函数要求至少有一个参数，即表示当前元素的索引值，可以根据该索引值来实现不同的操作。
• each() 方法会将当前遍历的元素作为第二个参数传递给回调函数，该元素也可以使用 $() 函数进行操作。