将元素包裹在 jQuery 中的每个循环中

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 这样的大库。 如果您想使用 vanilla DOM 方法，您可以轻松地删除对 j​​Query 的依赖：

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

Answer 4

请执行以下操作：

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