jQuery each() 将提要中的所有项目添加到 div

Question

我正在尝试从 rss 提要中获取项目并将每个项目放在不同的 div 中。这是我的代码：

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('FEED URL'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        $('<div class="inner"></div>').appendTo('#feed');   
        $(".inner").attr('data-role','collapsible');
        $(".inner").append("<h2>"+e.title+"</h2>");
        $(".inner").append("<p>"+e.content+"</p>");
        $(".inner").collapsible();
        //console.log("------------------------");
        //console.log("title      : " + e.title);
        //console.log("author     : " + e.author);
        //console.log("description: " + e.content);
      });
    }
  }
});

问题是它还会在创建下一个之前将 Feed 中的每个项目添加到 div。输出是这样的：

---第一项
可折叠 Div ------第二项
------第三项
------第四项
---可折叠 Div 第二项
------第三项
------第四项
---可折叠 Div 第 3 项
------第四项

Answer 1

$(".inner") 搜索文档中当前具有 class inner 的 all 元素，因此 $(".inner").append("some HTML") 追加给所有个。

如果您只想使用该迭代的那个，请将其保存到一个变量，然后使用该变量：

var inner = $('<div class="inner"></div>').appendTo('#feed');   
inner.attr('data-role','collapsible');
// ...and so on...

Answer 2

您的问题是选择器 .inner if returns 此 class 的所有元素，包括您刚刚添加的元素。将 $(".inner") 更改为 $(".inner:last-child")

Answer 3

我建议看一下您正在执行的 return 的控制台输出。如果您有 Chrome 或 Firefox 打开控制台。在您的代码中，您应该输入：

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('FEED URL'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {

      //PRINT THE CONTENT
      console.log(data.responseData.feed.entries)


      $.each(data.responseData.feed.entries, function (i, e) {
        $('<div class="inner"></div>').appendTo('#feed');   
        $(".inner").attr('data-role','collapsible');
        $(".inner").append("<h2>"+e.title+"</h2>");
        $(".inner").append("<p>"+e.content+"</p>");
        $(".inner").collapsible();
        //console.log("------------------------");
        //console.log("title      : " + e.title);
        //console.log("author     : " + e.author);
        //console.log("description: " + e.content);
      });
    }
  }
});

我的猜测是 return 的结构与您想象的不完全相同。

谢谢， -凯尔

jQuery each() 将提要中的所有项目添加到 div

jQuery each() adds all items from feed to div

html

javascript

rss

jquery