Insert <div> outside every three <li>

Question

Hello.

I have something like this:

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

This code generates this 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>

What I need is that every 3 li's will be in div /div. I know that this is not semantic and not right, but this is only for example. (Basically if I will figure out how to do this, I will replace li's on spans and that div that i need outside li's on li).

Will be very glad if someone will help me. Because code that I have is already too much for me.

Answer 1

Instead of using string i would use dom functions (document.createElement and element.appendChild). But if I stick with your method, it would be like this:

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

Answer 2

You can add this first in the loop:

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

and this last in the loop:

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

This will group the li items three and tree. If you only want the div around the first li in each group, the second condition would instead be the same as the first.

(And let me repeat what you said in the question about this not being semantically correct.)