将元素包裹在 jQuery 中，每个循环都包含在一个 div 中答案

【问题标题】：Wrap elements within jQuery each loop within a div将元素包裹在 jQuery 中，每个循环都包含在一个 div 中
【发布时间】：2020-05-06 22:17:16
【问题描述】：

我一直致力于将一些数据从 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>

我不确定如何有效地做到这一点。另外，如果还有什么可以做的来清理我目前拥有的东西，我也完全赞成。

【问题讨论】：

标签： javascript jquery html each

【解决方案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);
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

看起来你正在混合使用 jQuery 和 vanilla 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;
}

【讨论】：

谢谢！是的，我正在使用第 3 方数据馈送，并试图将其集成到我无法访问模板文件的大型 CMS 上的页面中。所以我正在尝试将一些可行的东西混合在一起，并且我可以嵌入到所见即所得的编辑器中。而且我研究得越多，vanillaJS 选项可能会更好地考虑加载时间等等。

【解决方案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>");
    });

【讨论】：

【解决方案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）将是最好的方法，因为它强制开发人员执行某些实践并节省执行所需的代码常见任务。

【讨论】：

是的，我不确定他们的 CMS 上是否加载了 Vue.js。长话短说...试图从另一个供应商处获取提要并将其解析到页面上，所有这些都在 WYSIWYG 编辑器中。
@ultraloveninja 我只是为可能偶然发现此答案的其他人提供该问题的一般解决方案。

【解决方案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);
    });

【讨论】：

请解释你的答案。