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

快来打我* 2022-12-17 01:23 120阅读 0赞

[{"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>

![format_png][]

[format_png]: /images/20221123/e09f1d5bc2e941f394df1432ea6fa624.png