Jquery | Wrap every 4 results with <div class="row"></div> | ajax

Question

I am working on a filter button / category feature that uses ajax, it will return the matching results. There are 4 results per row. I would like wrap the first 4 results and then every other 4 results with <div class="row"></div>

Everything works except I am having trouble figuring out how to wrap every 4 results with the row div. It is putting <div class="row"></div> in between every 4 results versus wrapping them.

Note: There will not always be an even multiple of 4 results, there may be something like 3 results or 7 results.

Update: I found out what was happening thanks to Jquery function closing div on append by itself Basically you can not append a partial div, it will add </div> to the end.

    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

You can not append a partial div, it will auto-complete it. I found you can store the data as a string variable and then convert it to html at end like so:

 $.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);


    }

I found out what was happening thanks to Jquery function closing div on append by itself.

Answer 2

you can try this:

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