如何使用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（）分析加載的項目

回答

相關問題