在 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

实现此目标的最佳方法是执行以下操作：

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 UI 框架（如 React [技术上不是框架]，Angular 或 Vue）将是最好的方法，因为它强制执行某些实践开发人员并节省执行常见任务所需的代码。

Answer 2

使用 $('<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 和原始 DOM 方法，这很奇怪。对于这种微不足道的事情，不需要像 jQuery 这样的大型库。如果你想使用 vanilla 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 3

请执行以下操作：

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

Answer 4

这样试试：

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>");
    });

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

Wrap elements within jQuery each loop within a div

javascript

jquery

html

each