在 jQuery 中包装元素,每个循环在 div 中
Wrap elements within jQuery each loop within a div
我一直在努力从 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>
我不确定如何有效地做到这一点。另外,如果还有什么可以做的来清理我目前拥有的东西,我也完全赞成。
实现此目标的最佳方法是执行以下操作:
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)将是最好的方法,因为它强制执行某些实践开发人员并节省执行常见任务所需的代码。
使用 $('<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;
}
请执行以下操作:
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);
});
这样试试:
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>");
});
我一直在努力从 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>
我不确定如何有效地做到这一点。另外,如果还有什么可以做的来清理我目前拥有的东西,我也完全赞成。
实现此目标的最佳方法是执行以下操作:
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)将是最好的方法,因为它强制执行某些实践开发人员并节省执行常见任务所需的代码。
使用 $('<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;
}
请执行以下操作:
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);
});
这样试试:
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>");
});