WEB 教程
实践 示例
HTML 参考手册
CSS 参考手册
PHP 参考手册

如何使用 jQuery 中的循环显示数组中的所有项目或值

主题:JavaScript / jQuery上一页|下一页

答案:使用jQuery.each()函数

jQuery.each()$.each() 可用于无缝迭代任何集合,无论是对象还是数组。 但是,由于 $.each() 函数在内部检索并使用传递的数组或对象的 length 属性。 所以,如果你它有一个属性叫做 length — 例如 {en: 'english', length: 5}— 该功能可能无法正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Print Array Values with Loop</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        var fruitsArray = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
        $.each(fruitsArray, function(index, value){
            $("#result").append(index + ": " + value + '<br>');
        });
    });
</script>  
</head> 
<body>
    <div id="result"></div>
</body>
</html>

同样,您可以通过循环打印对象的内容,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Display Object Contents with Loop</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        var supercarObject = {"brand": "Lamborghini", "model" : "Huracan", "origin": "Italy"};
        $.each(supercarObject, function(key, value){
            $("#result").append(key + ": " + value + '<br>');
        });
    });
</script>  
</head> 
<body>
    <div id="result"></div>
</body>
</html>

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:

Advertisements