如何使用jQuery each（）分析加载的项目

我有一个大页面，底部有一个“加载更多”按钮;每次点击“加载更多”都会通过AJAX加载更多内容。这部分内容是Facebook的喜欢和评论按钮：如何使用jQuery each（）分析加载的项目

<div class="fb-like" data-href="http://mysite.com/a<?=$x ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div> 
<div class="fb-comments" data-href="http://mysite.com/a<?=$x ?>" data-width="435"></div>

加载额外的内容后，我可以问的Facebook与FB.XFBML.parse();重新解析整个页面（这将导致这些div变成实际的喜欢按钮和评论形式）。然而，这种做法完美无缺，因为Facebook会重新分析页面上已有的内容，而不仅仅是新内容。每次用户点击“加载更多”时，它都会分析整个页面，所以FB功能的功能越来越多。

现在这里是好消息：docs for the FB parse say you can ask Facebook to parse just one element。所以我认为，好吧，当用户点击“加载更多”时，我会将这个新鲜的HTML包装在一个独特的div中，然后使用jQuery遍历div，找到所有Facebook标签并要求Facebook解析这些标签。好主意，对吧？但我无法让它工作。 :-)

所以这里是应该做的伎俩代码：

// "c" is my container div (a jQuery object, i.e. c = $('#container');) 
// "load more" button 
$('#loadmore').click(function() { 
    $.ajax({ 
     url: "/loadmore.php", 
     success: function(html) { 
      if(html) { 
       // wrap new HTML in special div 
       newDivName = "d"+String(new Date().valueOf()); 
       var $newHtml = $("<div id='"+newDivName+"'>"+html+"</div>"); 

       // append it to existing content, and tell Isotope 
       c.append($newHtml); 
       if(c.hasClass('isotope-loaded')) { c.isotope('appended', $newHtml); } 

       // walk through new HTML and get all Facebook "like" buttons and parse them 
       $('#'+newDivName+' .fb-like').each(function() { 
        console.log('xfbml parsing .'+this.attr('class')+' and data-href '+this.attr('data-href')); 
        FB.XFBML.parse(this); 
       }); 
      } 
     } 
    }); 

});

但我发现了：Uncaught TypeError: Object #<HTMLDivElement> has no method 'attr'（它告诉我，我的每一个（）工作不正常）...为什么？

更新：回答下面找到解决此问题，但它仍然无法正常工作。请参阅新问题：FB.XFBML.parse() on individual element does nothing

来源

2013-08-19 Eric

console.log('xfbml parsing .'+$(this).attr('class')+' and data-href '+$(this).attr('data-href'));

您仍然需要将此对象的原始数据传递给Facebook。 attr是一种jQuery方法。

来源

2013-08-19 00:56:44 Daniel

或者，为了仅评估文档的一部分，您可以传入一个元素。 FB.XFBML.parse（的document.getElementById（ '富'））;所以它期望一个DOM节点，而不是一个jQuery对象。 – Daniel

明白了。那么我怎样才能从jQuery的each（）方法返回的jQuery对象中获取DOM节点呢？ – Eric

这是原始节点。 $（this）接受该节点并将其封装在jQuery中。 – Daniel

使用$(this)而不是仅仅this。

注意：$(this)使.each()方法返回的项返回一个jQuery包装的set对象，让我们再次做jQuery的事情;否则this是原始值。

来源

2013-08-19 00:51:15

没有解决不了的问题。现在我有Facebook库抛出一个“未捕获[对象对象]”错误。 – Eric

答案'$（this）'是参考你关于错误信息“...没有方法'attr'的问题”。 –

什么是'FB.XFBML.parse（）'方法期待？ –

DEMO

.each()循环通过与类fb-like

$(this)所有元素指的是当前元素。

$(this).data('href')) GET年代data-href

化妆用的$(this).data('href'))代替$(this).attr('data-href')

这是可取的，好的做法要使用的值data attribute这样$(this).data('href'))

$('.fb-like').each(function() { 
    console.log('xfbml parsing .' + $(this).attr('class') + ' and data-href ' + $(this).data('href')); 
});

来源

2013-08-19 02:38:01

关于data（）函数的重点 - 我实际上已经忘记了这一点。谢谢！ – Eric

@Eric欢迎:) –

如何使用jQuery each（）分析加载的项目

回答

相关问题