Jquery |Оберните каждые 4 результата</div> |Аякса

Question

Я работаю над кнопкой фильтра / категорией, которая использует ajax, она вернет результаты сопоставления.Есть 4 результата в строке.Я хотел бы обернуть первые 4 результата, а затем все остальные 4 результата с помощью <div class="row"></div>

Все работает, за исключением того, что я не могу понять, как обернуть каждые 4 результата с помощью строки div.Он помещает <div class="row"></div> между каждыми 4 результатами по сравнению с их упаковкой.

Примечание: не всегда будет даже кратное 4 результату, может быть что-то вроде 3 результатов или 7 результатов.

Обновление: я выяснил, что происходит, благодаря Функция Jquery закрывает div при добавлении самостоятельно По сути, вы не можете добавить частичный 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

Вы можете попробовать это:

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

Answer 2

Вы не можете добавить частичный 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, закрывающая div при добавлении самостоятельно.