jQuery数据渲染,每行显示4个数据,超过四条数据自动换行

简介: 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>

相关文章
|
4月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
30 0
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
60 0
|
10月前
|
存储 Web App开发 JSON
JavaScript将csv转为json的解决方案(1):jQuery-csv解析csv数据
JavaScript将csv转为json的解决方案(1):jQuery-csv解析csv数据
216 0
|
5月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
5月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
33 1
|
6月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
26 0
|
6月前
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
40 1
|
6月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
29 1
|
6月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(2):时间戳的处理
jQuery数据结构渲染(2):时间戳的处理
24 1
|
6月前
|
JavaScript 前端开发 数据处理
jQuery数据结构渲染(1):图片数组的渲染
jQuery数据结构渲染(1):图片数组的渲染
39 1