jQuery |用 <div class="row"></div> 包装每 4 个结果 |阿贾克斯答案

【问题标题】：Jquery | Wrap every 4 results with <div class="row"></div> | ajaxjQuery |用 <div class="row"></div> 包装每 4 个结果 |阿贾克斯
【发布时间】：2018-12-03 13:38:24
【问题描述】：

我正在开发一个使用 ajax 的过滤器按钮/类别功能，它将返回匹配的结果。每行有 4 个结果。我想用<div class="row"></div> 包装前 4 个结果，然后每隔 4 个结果包装

一切正常，除了我无法弄清楚如何用行 div 包装每 4 个结果。它将<div class="row"></div> 放在每 4 个结果之间而不是包装它们。

注意：并不总是 4 个结果的偶数倍，可能会有 3 个结果或 7 个结果。

更新：感谢Jquery function closing div on append by itself，我发现了正在发生的事情基本上你不能附加部分div，它会在末尾添加</div>。

    success: function(data){
        $('.beats').html('');
        window.count = 0;
        $('.beats').append('<div class="row">');
        $.each(data, function(index, item) {
    //console.log(item);
            count++;
            //console.log(count);
            $('.beats').append('<div class="col-md-3 col-sm-6"><a href="#" class="track"><img src="image" alt="waves" class="img-responsive center-block"><span>name<span>keywords</span></span></a></div>');
            if(count == 4){
                $('.beats').append('</div> <div class="row">');
                window.count = 0;
            }
});
        $('.beats').append('</div>');
        //$('.beats').html('');
        //console.log(starttype);
        //console.log(data);

    }
});

【问题讨论】：

标签： jquery ajax append

【解决方案1】：

您不能附加部分 div，它会自动完成它。我发现您可以将数据存储为字符串变量，然后在最后将其转换为 html，如下所示：

 $.ajax({
    type:'post',
    url:'loadtracks.php?x=' + starttype,
    data: $(this).val(),
    dataType: 'json',
    success: function(data){
        console.log(starttype);
        $('.beats').html('');
        window.count = 0;
        window.teststring ='';
        teststring += '<div class="row">';
        $.each(data, function(index, item) {
            count++;
            //console.log(count);
            teststring += ('<div class="col-md-3 col-sm-6"><a href="#" class="track"><img src="image" alt="waves" class="img-responsive center-block"><span>name<span>keywords</span></span></a></div>');
            if(count == 4){
                teststring += '</div> <div class="row">';
                window.count = 0;
            }
});
        teststring += '</div>';
        $('.beats').html(teststring);


    }

感谢Jquery function closing div on append by itself，我才知道发生了什么。

【讨论】：

【解决方案2】：

你可以试试这个：

var data = [
        {name:"name1"},
        {name:"name2"},
        {name:"name3"},
        {name:"name4"},
        {name:"name5"},
        {name:"name6"},
        {name:"name6"},
        {name:"name7"},
        {name:"name7"}
    ];
    // count elements added
    var count = 0;
    //remaining elements
    var totalItems = data.length;
    var row = $("<div class='row'></div>")
    //clean container
    $(".beats").empty();
    //get the items in array data (you can use $.each, it does not matter)
    data.forEach((items)=>{
        count = count+1;
        totalItems-=1;
        // create and add dato to .row
        let container = "<div class='col-md-3 col-sm-6'>--your data--</div>"
        $(row).append(container);
        if(count==4){
            count = 0;
            // add row to .beats and create new row
            $(".beats").append(row);
            row =  $("<div class='row'></div>");
        }
        // this can solve your problem
        if(totalItems==0 && count < 4){
            $(".beats").append(row);
        }
    });

【讨论】：