每个第4个元素的addclass都不起作用

Question

我有一个动态构建一些html的脚本。然后将html附加到3个标签页。

我正在尝试为每个构建的第4个元素添加一个类。它适用于前两个页面，但不适用于第三个页面。我真的很困惑....任何帮助都非常感谢！

function tabs(page,targetClass){ // targetClass = the div to append to
    $.getJSON('http://test.com/'+page+'/page.ajax', function(json){   

        var productsHtml = [];

        $.each(json.products, function(index, product){

            $('.productout:nth-child(4n)').addClass('last');

            var productHtml = '' +
                '<div class="productout">..... etc</div>';

            productsHtml.push(productHtml);
        });
        productsHtml = productsHtml.join('');

        $(targetClass).html(productsHtml);

    });
}

Answer 1

您应该在将新元素添加到dom后添加该类。

function tabs(page, targetClass) { // targetClass = the div to append to
    $.getJSON('http://test.com/' + page + '/page.ajax', function (json) {
        var productsHtml = [];

        $.each(json.products, function (index, product) {
            var productHtml = '' +
                '<div class="productout">..... etc</div>';
            productsHtml.push(productHtml);
        });
        productsHtml = productsHtml.join('');
        //after the products html is added to the dom find the `productout` elements and add the desired class
        $(targetClass).html(productsHtml).find('.productout:nth-child(4n)').addClass('last');
    });
}