Почему не работает append?

Question

[drtvader]

Привет!
Почему-то не работает. Данные в json получает, но вот добавления не происходит.

$(document).ready(function(){
    $('.js-show-more').bind("click", function(){
        $.ajax({
            url: 'json/show_more.json',
            method: 'GET',
            dataType: 'json',
            success: function (json) {
                if (json['product'].length > 0) {
                    var product = json['product'];
                    $.each(product, function (id, data) {
                        append_block = $('js-product-list');
                        var html = '<li class="b-product-slider__item b-product-slider__item--catalog">\
                                        <a href="javascript:void(0);" title="' + data.name + '" data-id="' + data.id + '" class="b-product-slider__link b-product-slider__link--catalog">';
                                        if (parseInt(data.finger) > 0) {
                                            html += '<span class="b-icon b-icon--catalog">\
                                                <span class="b-icon__icon-back b-icon__icon-back--catalog-sticker b-icon__icon-back--sticker"></span>\
                                            </span>'
                                        } else if (parseInt(data.new) > 0) {
                                            html += '<span class="b-icon b-icon--catalog">\
                                            <span class="b-icon__icon-back b-icon__icon-back--catalog b-icon__icon-back--catalog-novinka"></span>\
                                            </span>'
                                        }
                                            html += '<span class="b-product-slider__image-wrap b-product-slider__image-wrap--catalog">\
                                                <img src="' + data.image + '" alt="" class="b-product-slider__image b-product-slider__image--catalog">\
                                            </span>\
                                            <span class="b-product-slider__info b-product-slider__info--catalog">\
                                                <span class="b-product-slider__title">' + data.name + '</span>\
                                                <span class="b-product-slider__text">\
                                                    <span>' + data.text + '</span>\
                                                </span>\
                                                <span class="b-product-slider__more-link b-product-slider__more-link--catalog">\
                                                    <span>ПОДРОБНЕЕ</span>\
                                                </span>\
                                            </span>\
                                        </a>\
                                    </li>';
                        append_block.append(html);
                    });
                }
            }
        });
    })
});

UPD Как можно ограничить количество выводимых блоков из json? Например в json 10 блоков прописано, а надо максимум за 1 раз вывести 5 блоков?

Answer 1

[Rsa97]

append_block = $('js-product-list');
А вы уверены, что в HTML у вас есть элемент с тэгом js-product-list?

Comments

[drtvader]

Бинго) Спасибо)
Есть еще один вопрос, как ограничить количество выводимых блоков из json? Например в json записано 10 блоков, а нужно что бы за раз вывелось всего 5

[Rsa97]

drtvader: перебирать через for, а не через each

[drtvader]

Rsa97: а через each разве нельзя такое сделать?

[Rsa97]

Можно, но придётся отдельный счётчик делать и после нужного блока прерывать each, так что разницы никакой.
Ещё можно заранее отделить нужную часть массива через splice().