Question

我有一个大页面，底部有一个“加载更多”按钮;每次点击“加载更多”都会通过AJAX加载更多内容。部分内容是Facebook喜欢和评论按钮：

<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

Answer 1

使用$(this)代替this。

注意：$(this)使从.each()方法返回的项再次成为jQuery包装的set对象，让你再次对它执行jQuery操作;否则this是原始值。

Answer 2

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

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

Answer 3

DEMO

.each()循环使用类fb-like

的所有元素

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

$(this).data('href'))获取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'));
});

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

3 个答案: