javascript - jquery 将数组分成 4 组

Question

我有一个脚本，当前通过 json 文件和 ajax 获取 Bootstrap 轮播的数据。它工作正常并且已经工作了一段时间。我遇到的问题是，我现在正在尝试设计一种新的轮播显示，将各个幻灯片显示为四张一组的缩略图，而不是单个幻灯片。我不确定在每个循环中将数组分成 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});    
    });
});

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

<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>

Answer 1

要么以不同的方式从服务器获取数据，要么必须使用 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++;
});