jQuery读取数组数据并在列表中呈现
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery 读取数组数据并在列表中呈现.本实例是使用for循环遍历输出数组元素，for循环是一个常见的遍历数组的方法， 使用jq的for循环语法可以遍历一个数组中的每一个元素。

在这个示例中，我们首先创建了一个包含数据的数组datas。然后，使用for循环遍历数组，并创建一个listData()方法来读取数据并填充到元素内容中。

主要步骤：

  • 定义数组

  • 使用 jQuery 读取数组

  • 输出数组的每一个值

  • 运行代码并观察输出

主要js代码与说明

<script type="text/javascript">
    //定义数组数据内容
    var datas = [
]

    // 列表内容初始化 
    var str = ''
    for (var i in datas) {
        str = str + listData(i, datas[i].img, datas[i].title)
    }
    $("#ul").html(str)

    // 定义列表标签
    function listData(index, url, name) {
        return '<li><a data-ind ="' + index + '" href="javascript:;"><div class="img"><img src="' + url + '" /></div><p>' + name + '</p></a></li>'
    }
</script>