在jQuery中包装元素每个循环都在一个div中

Question

我一直致力于将XML提要中的一些数据解析到JSON中，所有这些都运行得很好。只是我试图将数据的每一部分包装在一个div中。

这是我正在使用的主要部分：

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var idnum = newsItem.id;
      newsDiv.append($(document.createElement("h2")).text(newsItem.headline));
      newsDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
      newsDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
    });

它将输出：

<h2>Headline</h2>
<p>Date things</p>
<a href="https://urltopage/123">Read More</a>
<h2>Headline2</h2>
<p>Date things2</p>
<a href="https://urltopage/456">Read More</a>
<h2>Headline3</h2>
<p>Date things3</p>
<a href="https://urltopage/789">Read More</a>

以此类推。我想要的是将所有这些都包装在一个<div>中，这样看起来就像这样：

<div>
<h2>Headline</h2>
<p>Date things</p>
<a href="https://urltopage/123">Read More</a>
</div>
<div>
<h2>Headline2</h2>
<p>Date things2</p>
<a href="https://urltopage/456">Read More</a>
</div>
<div>
<h2>Headline3</h2>
<p>Date things3</p>
<a href="https://urltopage/789">Read More</a>
</div>

我不确定如何有效地做到这一点。此外，如果有任何其他可以做的事情来清理我目前拥有的东西，我也完全支持。

Answer 1

使用$('<div>')创建新的空div，然后对其调用.append，传递3个参数(您正在创建的3个元素)，并将其附加到newsDiv

​

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
const release = [{
  headline: 'headline',
  releaseDate: 'releaseDate',
  id: 1
}];
$(release).each(function(index, newsItem) {
  const $div = $('<div>').append(
    $('<h2>').text(newsItem.headline),
    $('<p>').text(newsItem.releaseDate),
    $('<a href="https://urltothing.com/' + newsItem.id + '">Read More</a>')
  );
  newsDiv.append($div);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

​

但是，看起来您混合了jQuery和vanilla DOM方法，这非常奇怪。对于如此微不足道的事情，不需要像jQuery这样的大型库。如果您想使用普通的DOM方法，您可以很容易地移除对jQuery的依赖：

​

var newsDiv = document.body.appendChild(document.createElement('div'));
newsDiv.classList.add('news-feed');
const release = [{
  headline: 'headline',
  releaseDate: 'releaseDate',
  id: 1
}];
for (const { headline, releaseDate, id } of release) {
  const div = newsDiv.appendChild(document.createElement('div'));
  div.innerHTML = '<h2></h2><p></p><a href="https://urltothing.com/' + id + '">Read More</a>';
  const [h2, p] = div.children;
  h2.textContent = headline;
  p.textContent = releaseDate;
}

​

Answer 2

像这样尝试：

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var idnum = newsItem.id;
      newsDiv.wrap("<div>");
      newsDiv.append($(document.createElement("h2")).text(newsItem.headline));
      newsDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
      newsDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
      newsDiv.wrap("</div>");
    });

Answer 3

要实现这一点，最好的方法是这样做：

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
$(release).each(function(index, newsItem) {
  var itemDiv = $(document.createElement("div"));
  var idnum = newsItem.id;
  itemDiv.append($(document.createElement("h2")).text(newsItem.headline));
  itemDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
  itemDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
  newsDiv.append(itemDiv);
});

注意我是如何创建另一个div元素来包装其他元素的。

至于清理代码，使用JS框架(如React技术上不是框架，Angular或Vue)将是最好的方法，因为它将某些实践强加于开发人员，并节省了执行常见任务所需的代码。