jQuery数据渲染，每行显示4个数据，超过四条数据自动换行
[{"name":"体验区统计","numb":0},{"name":"test909","numb":0},{"name":"test910","numb":0},{"name":"111","numb":0},{"name":"test","numb":0},{"name":"test11111","numb":0},{"name":"记忆区统计","numb":0}]代码：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>复选框checkbox自定义样式</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<!-- 中间部分 -->
<div class="contScend">
</div>
</body>
<script type="text/javascript">
$.ajax({
url: "test.json",
type: 'GET',
dataType: 'json',
success: function(data) {
var html = "";
html += '<div>';
$.each(data, function(i, item) { //
html += '<span>' + item.name + ':' + item.numb + '人' + '</span>';
if (i != 0 && (i + 1) % 4 == 0) {
html += '<br>';
}
});
html += '</div>';
$(".contScend").html(html);
}
});
</script>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020.10.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
