Вставьте <div>снаружи каждые три <li>

Question

У меня есть что-то вроде этого:

function cat_filter() {
    $.ajax({
        type: "POST",
        url: 'json/cat_filter.aspx',
        data: "catId=" + "&styleId=" + "&colourId=" + "&sizeId=" + "&minPrice=" + "&maxPrice=",
        dataType: "json",
        beforeSend: function () {
            //load loading cursor
        }, success: function (data) {
            var CatItems = "";

            for (var x = 0; x < data.PRODUCTS.length; x++) {
                CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-' + [x] + ' jcarousel-item-' + [x] + '-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"><a class="large_image" href="#"><img  src="' + data.PRODUCTS[x].product_img + '" alt="' + data.PRODUCTS[x].product_name + '"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name + '</h3>';

                if (data.PRODUCTS[x].product_onsale == 1) {
                    CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">&pound;' + data.PRODUCTS[x].product_retailprice + '</span>&nbsp;&nbsp;<span class="price geo_17_darkbrown">&pound;' + data.PRODUCTS[x].product_webprice + '</span>';
                } else {
                    CatItems += '<span class="price geo_17_darkbrown">&pound;' + data.PRODUCTS[x].product_webprice + '</span>';
                }

                if (data.PRODUCTS[x].product_COLOURS) {
                    CatItems += '<span class="colour">';

                    for (var y = 0; y < data.PRODUCTS[x].product_COLOURS.length; y++) {

                        CatItems += '<span><a href="' + data.PRODUCTS[x].product_COLOURS[y].colours_large + '"><img src="' + data.PRODUCTS[x].product_COLOURS[y].colours_thumb + '" alt="' + data.PRODUCTS[x].product_COLOURS[y].colour_name + '" /></a></span>';
                    }

                    CatItems += '</span>';
                }

                CatItems += '</li>';

            }
            $('.carousel_00 ul').html(CatItems);
        }, complete: function () {
            //remove loading cursor
        }
    });
}

Этот код генерирует этот HTML:

    <div class="carousel_00">
        <ul>            
            <li><a href="#" class="large_image"><img  src="assets/images/dress1.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            <span class="colour">
                <span><a href="assets/images/big_image_1.gif"><img src="assets/images/black.gif" alt="balck"></a></span>
                <span><img src="assets/images/brown.gif" alt="brown"></span>
                <span><img src="assets/images/purple.gif" alt="purple"></span>
            </span>
            </li>
            <li><a href="#"><img  src="assets/images/dress2.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
            <li><img class="sale" src="assets/images/sale.gif" alt="sale" /><a href="#"><img  src="assets/images/dress3.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="geo_17_red_linethr">&pound;99.99</span>&nbsp;&nbsp;<span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
            <li><a href="#"><img  src="assets/images/dress1.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;59.99</span>
            </li>
            <li><a href="#"><img  src="assets/images/dress2.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
            <li><a href="#"><img  src="assets/images/dress3.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
            <li><a href="#"><img  src="assets/images/dress1.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
            <li><a href="#"><img  src="assets/images/dress2.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
            <li><a href="#"><img  src="assets/images/dress3.gif" alt="image"></a>
            <h3 class="geo_17_darkbrown">Rachel Dress</h3>
            <span class="price geo_17_darkbrown">&pound;89.99</span>
            </li>
        </ul></div>

Мне нужно, чтобы каждые 3 li были в div / div. Я знаю, что это не семантически и не правильно, но это только для примера.(В основном, если я выясню, как это сделать, я заменю li на span и тот div, который мне нужен вне li на li).

Буду очень рад, если кто-нибудь мне поможет.Потому что у меня уже слишком много кода.

Answer 1

Вы можете добавить это первое в цикле:

if (x % 3 === 0) CatItems += '<div>';

и это последнее в цикле:

if (x % 3 === 2 || x = data.PRODUCTS.length - 1) CatItems += '</div>';

Это сгруппирует элементы li в три и дерево.Если вы хотите, чтобы div находилось только вокруг первого li в каждой группе, второе условие было бы таким же, как и первое.

(И позвольте мне повторить то, что вы сказали в вопросе об этом небыть семантически правильным.)

Answer 2

Вместо использования строки я бы использовал функции dom (document.createElement и element.appendChild).Но если я буду придерживаться вашего метода, это будет выглядеть так:

               success: function(data) {
                   var CatItems = "";

                   for(var x=0; x < data.PRODUCTS.length; x++) {
                        if(x%3==0)
                            CatItems += "<div>";
                        CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"><a class="large_image" href="#"><img  src="'+ data.PRODUCTS[x].product_img +'" alt="' + data.PRODUCTS[x].product_name +'"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name +'</h3>';

                        if ( data.PRODUCTS[x].product_onsale==1 ) {
                            CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">&pound;'+ data.PRODUCTS[x].product_retailprice +'</span>&nbsp;&nbsp;<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>';
                        } else {
                            CatItems += '<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>';
                        }

                        if ( data.PRODUCTS[x].product_COLOURS ) {
                            CatItems += '<span class="colour">';

                            for(var y=0; y < data.PRODUCTS[x].product_COLOURS.length; y++) {

                                CatItems += '<span><a href="'+ data.PRODUCTS[x].product_COLOURS[y].colours_large +'"><img src="'+ data.PRODUCTS[x].product_COLOURS[y].colours_thumb +'" alt="'+ data.PRODUCTS[x].product_COLOURS[y].colour_name +'" /></a></span>';
                            }

                            CatItems += '</span>';
                        }

                        CatItems += '</li>';

                        if(x%3==0)
                            CatItems += "</div>";

                   }
                   $('.carousel_00 ul').html(CatItems);
               },