Javascript jquery将数组拆分为4个组

我有一个脚本，当前通过json文件和AJAXA获取引导转盘的数据。它工作得很好，已经工作了一段时间。我现在面临的问题是，我正在尝试设计一种新的旋转木马显示，将单个幻灯片显示为四张一组的缩略图，而不是单个幻灯片。我不确定在每个循环中将数组分成4个组的正确逻辑。如有任何建议，将不胜感激。下面是我当前的JQUERY脚本，用于获取幻灯片的数据和新布局的HTML

JQUERY

$(document).ready(function(){
    $.getJSON("/property/slideshow_json", function(data){
    }).success(function(data){
        $.each(data, function (index, value) {
            $(".carousel-indicators").append($( '<li data-target="#myCarousel" data-slide-to="' +index+ '">'+ (index+1) +'</li>' ));
            $(".carousel-inner").append($('<div class="item"><img src="/property/photo/'+value.mls_number+'/1"><div class="carousel-caption"><h4>PRICED TO SELL | $'+value.price+'</h4><p style="text-transform:uppercase;">'+value.address+' <a href="/property/detail/'+value.mls_number+'"class="btn btn-small btn-info pull-right">View Details</a></p></div></div>'));
        });
        $('.carousel-indicators li:first').addClass('active');
        $('.carousel-inner div:first').addClass('active');
        $('#myCarousel').carousel({interval: 4000});    
    });
});

$（文档）.ready（函数（）{
$.getJSON（“/property/slideshow_json”），函数（数据）{
}).成功（功能（数据）{
$.each（数据、函数（索引、值）{
$（“.carousel indicators”）.append（$（“
“+（index+1）+”
））；
$（“.carousel-inner”）.append（$（'PRICED-TO-SELL |$'+value.price+'
'+value.address+”
）；
});
$（'.carousel indicators li:first'）.addClass（'active'）；
$（'.carousel内部div:first'）.addClass（'active'）；
$（#myCarousel'）。carousel（{interval:4000}）；
});
});

上述脚本需要如何输出的示例。

<div class="span12">
    <h2>Featured Listings</h2>
    <div id="featured" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#featured" data-slide-to="0" class="active"></li>
            <li data-target="#featured" data-slide-to="1"></li>
            <li data-target="#featured" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <div class="row-fluid">
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                </div>
            </div>
        </div>
        <a class="carousel-control left" href="#featured" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#featured" data-slide="next">&rsaquo;</a>
    </div>
</div>

特色节目表

要么以不同的方式从服务器获取数据，要么使用jQuery对其进行操作。就我个人而言，我会在服务器端这样做，并收到格式正确的json

但是，使用jQuery有很多方法可以做到这一点，这是一种：

var counter = 0, 
    indicators = 0, 
    items = '<div class="item active"><div class="row-fluid">';
$.each(data, function (index, value) {
    switch(counter) {
        case 4: $(".carousel-indicators").append($( '<li data-target="#featured" data-slide-to="' +indicators+ '"></li>' ));
            $(".carousel-inner").append(items + '</div></div>');
            // increment indicators
            indicators++;  
            // "reset" items
            items = '<div class="item active"><div class="row-fluid">';
            break;
        default:
            // you might need something more here. 
            // I didn't saw in your html sample value.address and value.mls_number
            items += '<div class="span3"><a href="#x" ><img src="/property/photo/'+value.mls_number+'/1" alt="Image" style="max-width:100%;" /></a></div>';
    }
   counter++;
});

var计数器=0，
指标=0，
项目=''；
$.each（数据、函数（索引、值）{
开关（计数器）{
案例4:$（“.carousel indicators”）.append（$（“
”）；
$（“.carousel-inner”）.append（items+”）；
//增量指标
指标++；
//“重置”项目
项目=''；
打破
违约：
//你可能需要更多的东西。
//我没有看到你的html示例value.address和value.mls\u编号
项目+=''；
}
计数器++；
});

假设我会使用.slice（），计算数组中的项数，并使用while循环和计数器将数组分块？我吃得最少对吗？你可能想读一下：，