Question

我花了好几个小时试图找出为什么 $（＆＃39; #news-main-container＆＃39;）。html（itemlist）; 没有工作和找到当我使用alert($('[id="news-main-container"]').length);时它返回0，暗示元素不存在但我可以在检查元素时看到代码中的元素。 项目列表正在提醒，但它不会插入＃news-main-container ，因为它认为它不存在。有谁知道是什么原因引起的？

//get cached News JSON
function getNewsCache(){
        cache['news'] = JSON.parse(localStorage.getItem('news'));
        var objCache = cache['news'].data;
        objCache = JSON.parse(objCache); //Parse string to json
        buildNewsList(objCache);                
}

//build HTML list of news items
function buildNewsList(objCache){
        var itemlist='';
        $.each(objCache, function(i, jd) {
            var newstitle = jd.title.rendered;
            var newsexcerpt = jd.excerpt.rendered;
            var newscontent = jd.content.rendered;
            var newsimageid = jd.featured_media;
            var thumbsrc = '';

            itemlist = itemlist+'<div class="content-news-box" id="newsclick" data-newscontent="'+newscontent+'" data-newstitle="'+newstitle+'"><div class="news-thumb-img"><img height="150px" src="'+thumbsrc+'"/></div><div class="news-title">'+newstitle+'</div><div class="news-excerpt">'+newsexcerpt+'<img height="40px" class="news-arrow-right" src="img/icon-arrow-right.png"/></div></div>';

        });
       alert(itemlist);
       alert($('[id="news-main-container"]').length);  //returns 0 but I can see it in the code!!
       $('#news-main-container').html(itemlist);  //WHY DOESNT THIS WORK?!?!?!
}

$("#load-news").click(function(event){
         $('#stage').html('');
         $('#stage').css('background','none');
         $("#stage").load("news.html");
        var data = {};  
        //get cache     
        cache['news'] = JSON.parse(localStorage.getItem('news'));  
        getNewsCache();
});

Answer 1

我重新安排了我的代码，以便所有内容都包含在 $（“#stage”）。load（“news.html”，function（）{} 中并且有效。谢谢@The_ehT，你的建议让我在那里！

Answer 2

最有可能在呈现DOM之前运行此代码，因此元素在运行时不存在。请尝试将代码放入＆＃34;文档准备好＆＃34;

$(function(){
    // Your code
});

JQuery - 元素存在于代码中，但在使用.length（）时返回0

2 个答案: