Question

我正在使用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);

    }
});

Answer 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，我才知道发生了什么事。

Answer 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);
        }
    });

jQuery |每4个结果用<div class =“ row”> </div> |阿贾克斯

2 个答案: