Question

我有一个数组，我想输出为嵌套的div。它有一点错误，但我无法解决HTML问题所在。

我希望数据输出为：

<div id="container">
   <div class="item">Data comes out here</div>
   <div class="item">Data comes out here</div>
   <div class="item">Data comes out here</div>

但是目前还有一个额外的item div包装所有内容，因此我的HTML看起来像这样：

<div id="container">
    <div class="item">
       <div class="item">Data comes out here</div>
       <div class="item">Data comes out here</div>
       <div class="item">Data comes out here</div>
    </div>
</div>

我无法解决如何将数组输出调整为不在第一个item div中输出，而是输出item div in {{1 div}

Live example

代码：

container

Answer 1

我想这一行会导致当前的行为：

$('div.item').append(items.join(' '));

尝试更改为：

$('div.item').after(items.join(' '));

不是插入div内部，而是在它之后插入。

Answer 2

使用.after代替.append，如下所示：

$('div.item').after(items.join(' '));

Answer 3

而不是$('div.item').append(items.join(' '));使用

 $('#container').append(items.join(' '));

因为它会附加额外的item课程分组。

Answer 4

$(xml).find('item').each(function(index,element)
{
    var item = $('<div class="item"></div>');
    var link = item.append('<a href="'+$(element).find("link").text()+'"></a>')
    link.append("<h2>"+ $(element).find("title").text() + "</h2>");
    link.append("<p>"+ $(element).find("description").text() + "</p>");

    //Suggestion: use moment.js :P
    var date     = new Date( $(element).find("pubDate").text() );
    var yyyymmdd = date.getFullYear() +''+ (date.getMonth()+1) +''+ date.getDate();

    link.append("<p>"+yyyymmdd+"</p>");
    link.append("<p>Category: "+$(element).find("category").text()+"</p>");

    item.appendTo("#container")
});

更好的方法，它应该工作：）

输出数组作为嵌套div

4 个答案: