jQuery .each()用法及代码示例

jQuery 中的each() 函数迭代对象和数组。具有 length 属性的数组从索引 0 到 length-1 进行遍历，而像对象这样的数组则通过其属性名称进行遍历。

用法:

$.each('array or object', function(index, value){
  // Your code
})

在此 .each() 函数中，数组或对象作为第一个参数和回调函数。该回调函数可以选择接受两个参数：索引和值。因此，我们必须将回调函数传递给each()方法。

示例 1：

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- using jquery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
</head> 
  
<body> 
  <script> 
    let arr = [10, 20, 30, 40, 50]; 
    $.each(arr, function (index, value) { 
        document.write(index + ": " + value + "<br>"); 
    }); 
  </script> 
</body> 
  
</html>

输出：

$(selector).each()：我们还可以通过从回调函数返回 false 来提前打破循环。它与上面的 each() 函数相同，但它迭代 JQuery 对象的 DOM 元素，并且可以为每个元素执行一个函数。

用法:

$('selector').each(function(index, value){
    // Your code
})

它只接受为每个选定元素执行的回调函数。

例子：

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- using jquery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
</head> 
  
<body> 
    <p>para-1</p> 
    <p>para-2</p> 
    <p>para-3</p> 
    <p>para-4</p> 
    <p>para-5</p> 
    <script> 
        $("p").each(function (index) { 
            console.log(index  
                + ": " + $(this).text()); 
        }); 
    </script> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自hritikrommie大神的英文原创作品 What is the use of .each() function in jQuery ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。