Jquery选择追加元素失败

Question

我试图创建从JSON文件加载数据的jQuery脚本，然后追加div的JSON数据，并添加div(这是有效的)后，我试图隐藏它，使用选择器，但它返回什么。

jQuery(document).ready(function($){
    //get reference for timeline div, to which will append data
    var timeline = $('#cd-timeline');

    //get JSON data
    $.getJSON('js/qw.json', function(data){
    //console.log(data.items);
            //for each item in json file, will append section with timeline data
            $.each(data.items, function(key,val){ 

                var timelineItem = '<div class="cd-timeline-block">'
                                    + ' <div class="cd-timeline-img cd-picture">'
                                    + '     <img src="img/cd-icon-picture.svg" alt="Picture">'
                                    + ' </div> <!-- cd-timeline-img -->'
                                    + ' <div class="cd-timeline-content">'
                                    + '     <h2>'+val.name+'</h2>'
                                    + '     <p>'+val.description+'</p>'
                                    + '     <p>SKU: '+val.sku+'</p>'
                                    + '     <a href="'+val.url+'" target="_blank" class="cd-read-more">View item</a>'
                                    + '     <span class="cd-date">'+val.date+'</span>'
                                    + ' </div> <!-- cd-timeline-content -->'
                                    + '</div> <!-- cd-timeline-block -->';
                //timeline.append(timelineItem);
                timeline.addChild(timelineItem);
            })
    }); 

    var timelineBlocks = $('.cd-timeline-block');
    var offset = 0.8;
    //hide timeline blocks which are outside the viewport
    hideBlocks(timelineBlocks, offset);

    //on scolling, show/animate timeline blocks when enter the viewport
    $(window).on('scroll', function(){
        (!window.requestAnimationFrame) 
            ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
            : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
    });
    function hideBlocks(blocks, offset) {
        blocks.each(function(){
            ( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
        });
    }
    function showBlocks(blocks, offset) {
        blocks.each(function(){
            ( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
        });
    }

});

不幸的是，函数hidBlocks不起作用，因为timelineBlocks是空的。如何选择附加元素来创建列表，这样我就可以做"for each"循环?

迈克

Answer 1

选择元素的代码很可能发生在填充元素之前。您需要将代码移到$中。getJSON回调函数:

$.getJSON('js/qw.json', function(data){
//console.log(data.items);
        //for each item in json file, will append section with timeline data
        $.each(data.items, function(key,val){ 

            var timelineItem = '<div class="cd-timeline-block">'
                                + ' <div class="cd-timeline-img cd-picture">'
                                + '     <img src="img/cd-icon-picture.svg" alt="Picture">'
                                + ' </div> <!-- cd-timeline-img -->'
                                + ' <div class="cd-timeline-content">'
                                + '     <h2>'+val.name+'</h2>'
                                + '     <p>'+val.description+'</p>'
                                + '     <p>SKU: '+val.sku+'</p>'
                                + '     <a href="'+val.url+'" target="_blank" class="cd-read-more">View item</a>'
                                + '     <span class="cd-date">'+val.date+'</span>'
                                + ' </div> <!-- cd-timeline-content -->'
                                + '</div> <!-- cd-timeline-block -->';
            //timeline.append(timelineItem);
            timeline.addChild(timelineItem);

        })
        var timelineBlocks = $('.cd-timeline-block');
        var offset = 0.8;
        //hide timeline blocks which are outside the viewport
        hideBlocks(timelineBlocks, offset);
});