Javascript jQuery each（）将所有项从提要添加到div

我正在尝试从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);
      });
    }
  }
});

$.ajax({
url:document.location.protocol+'//ajax.googleapis.com/ajax/services/feed/load？v=1.0&num=10&callback=？&q='+encodeURIComponent（'feed url'），
数据类型：“json”，
成功：功能（数据）{
if（data.responseData.feed&&data.responseData.feed.entries）{
$.each（data.responseData.feed.entries，function（即，e）{
$（“”）.appendTo（“#feed”）；
$（“.inner”）.attr（'data-role'，'collapsable'）；
$（“.inner”）.append（“+e.title+”）；
$（“.inner”）.append（“”+e.content+”
”）；
$（“.inner”）.collappable（）；
//console.log（“---------------------------”）；
//控制台日志（“标题：+e.title”）；
//console.log（“作者：+e.author”）；
//console.log（“说明：”+e.content）；
});
}
}
});

问题是，它还将提要中的每一项都添加到div中，然后再创建下一项。输出如下：

---带第一项的可折叠Div
------第二项
------第三项
------第4项
---带第二项的可折叠Div
------第三项
------第4项
---带第三项的可折叠Div
------第4项

$（“.inner”）

搜索文档中当前包含类

inner

的所有元素，因此

$（.inner”）.append（“一些HTML”）

将其附加到所有元素

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

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

var-inner=$（''）.appendTo（'#feed'）；
attr（'data-role'，'collapsable'）；
//……等等。。。

您的问题是选择器

.internal

if返回该类的所有元素，包括您刚才添加的元素。将

$（“.inner”）

更改为

$（“.inner:last child”）

我建议您查看一下正在进行的每个返回的控制台输出。如果您有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);
      });
    }
  }
});

$.ajax({
url:document.location.protocol+'//ajax.googleapis.com/ajax/services/feed/load？v=1.0&num=10&callback=？&q='+encodeURIComponent（'feed url'），
数据类型：“json”，
成功：功能（数据）{
if（data.responseData.feed&&data.responseData.feed.entries）{
//打印内容
日志（data.responseData.feed.entries）
$.each（data.responseData.feed.entries，function（即，e）{
$（“”）.appendTo（“#feed”）；
$（“.inner”）.attr（'data-role'，'collapsable'）；
$（“.inner”）.append（“+e.title+”）；
$（“.inner”）.append（“”+e.content+”
”）；
$（“.inner”）.collappable（）；
//console.log（“---------------------------”）；
//控制台日志（“标题：+e.title”）；
//console.log（“作者：+e.author”）；
//console.log（“说明：”+e.content）；
});
}
}
});

我的猜测是，回报的结构与你想象的不完全一样

谢谢，

---

-Kyle

var$inner=$（''）.appendTo（'#feed'）$attr（'data-role'，'collapsable'）$内附（“+e.title+”）$内附（“”+e.content+“
”）$内部可折叠（）

My应该是重复的，如果页面上有其他元素与该类一起，而这些元素恰好是其父类中的最后一个子元素？（不断地在DOM中重新查询您手头已有的元素是非常愚蠢的。）当然，您可以想出需要另一个选择器的情况，但是如果OP熟悉他正在编写的代码的结构，那么从逻辑上来说，这是可以避免的。我确实同意你的回答具有更好的资源效率，但不要欣赏你陈述中的

愚蠢

部分“愚蠢”是一种非常温和的批评形式，没有冒犯的意思。