1

我有一个大页面，底部有一个“加载更多”按钮；每次点击“加载更多”都会通过 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 函数要做的事情越来越多。

现在有个好消息：FB 解析的文档说您可以要求 Facebook 只解析一个元素。所以我想，好吧，当用户单击“加载更多”时，我会将新鲜的 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'这告诉我我的 each() 工作不正常）......为什么？

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

4

3 回答 3

2

Use $(this) instead of just this.

Note: $(this) makes the item returned from the .each() method a jQuery wrapped set object again and let's you do jQuery things to it again; otherwise this is the raw value.

于 2013-08-19T00:51:15.433 回答
1

演示

.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'));
});
于 2013-08-19T02:38:01.497 回答
1 
console.log('xfbml parsing .'+$(this).attr('class')+' and data-href '+$(this).attr('data-href'));

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

于 2013-08-19T00:56:44.503 回答