jq-each遍历到页面展示

最新推荐文章于 2025-06-27 10:44:03 发布

王子様~

最新推荐文章于 2025-06-27 10:44:03 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ 文章标签： jq

本文链接：https://blog.youkuaiyun.com/qq_31424825/article/details/79057810

JQ 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个简单的HTML页面展示了如何使用jQuery的each方法来遍历一个包含两条记录的数据列表，并将每条记录的内容动态地添加到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：LoveEmperor-王子様

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jq-each遍历</title>
   <script type="text/javascript" src="../resources/js/bin/jquery.min.js"></script>
</head>
<body>
<div id="title"></div>
</body>

<script language="javascript" type="text/javascript">

 var data = {"list":[{"id":1,"content":"人生在世"},{"id":2,"content":"哪能没曲折"}]};
 var str1 = '';
 var str2 = '';
 $.each(data.list, function(i, item) {

    console.log(item.id);

    str1 += '<p>'+data.list[i].id+data.list[i].content+'</p>';

    $("#title").html(str1)
 });
</script>
</html>