循环遍历数组中的项目以分配 data-id，但仅获取数组中的最后一项
Looping over items in array to assign data-id, but only getting last item in array
>Objective
- 给每个礼物一个 1 的
data-id，一直到gifts.length(即 245(，这将帮助我从数组中提取相应的数据 - 找到一种更好的方法来重复数组中所有礼物的结构
.gift结构
问题
我有一个包含 200+ 个礼物的数组，它们都具有相似的结构，我一直在尝试为每个礼物提供一个唯一的数据 ID，但我得到了数组中的最后一个ID，即 245
我也想知道在不必使用车把之类的东西的情况下重复这种结构的最佳方法是什么.js，我已经尝试过 multiplyNode，但我不确定浏览器支持是否很棒。 append
<div class="gift data-id="">
<img src="" data-original="" class="gift__image lazy">
<p class="gift__name">tk-name</p>
<p class="gift__price">tk-price</p>
<p class=""><span class="gift__description">tk-description</span> <a href="" class="gift__link">tk-url</a></p>
<div class="gift__share">
<div class="gift__icons">
<a href="" class="link--twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="" class="link--facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="" class="link--pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</div>
</div>
<a href="" target="_blank"><button class="btn btn--buy">Buy on Amazon</button></a>
</div> <!-- .gift -->
脚本.js
// Loop over all of the gifts
for (let i = 0; i < gifts.length; i++) {
$(".gift").attr("data-id", [i]);
// Gift information from gifts.js
let giftName = $(".gift__name").html(gifts[i].Name);
let giftPrice = $(".gift__price").html(gifts[i].Price).prepend("$");
let giftDescription = $(".gift__description").html(gifts[i].Description);
let giftLink = $(".gift__link").html(gifts[i].URL);
}
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
const totalGifts = gifts.length
multiplyNode(document.querySelector('.gift'), totalGifts, true);
礼物.js(共245件礼物(
var gifts = [
{
"ID": 1,
"Name": "Air plants",
"Price": 25,
"Description": "A small glass globe containing air plants, gravel, moss and crystals, comes in various designs and can brighten up your window or desk ($25) at Flowers and Weeds, 3201 Cherokee Street, flowersandweeds.com, which also sells monthly subscription boxes at various price points.",
"Category": "Gifts for anyone",
"Type": "Other",
"URL": "flowersandweeds.com",
"Destination": "Cherokee Street",
"Location": "Flowers and Weeds, 3201 Cherokee Street",
"Latitude": 38.59,
"Longitude": -90.2369742,
"Position": "38.5949207, -90.2369742",
"ImageURL": "-"
}
];
在我看来
，每次通过循环时，您都会将每个id(并替换它(分配给所有带有.gift类的元素。尝试仅将其分配给当前礼物：
var gift = $($(".gift")[i]);
gift.attr("data-id", [i]);
这可能不是你想要的方式，但如果我这样做，我会这样做：
var gifts = [{
"ID": 1,
"Name": "1 Air plants",
"Price": 400,
"Description": "A small glass globe containing air plants, gravel, moss and crystals, comes in various designs and can brighten up your window or desk ($25) at Flowers and Weeds, 3201 Cherokee Street, flowersandweeds.com, which also sells monthly subscription boxes at various price points.",
"Category": "Gifts for anyone",
"Type": "Other",
"URL": "flowersandweeds.com",
"Destination": "Cherokee Street",
"Location": "Flowers and Weeds, 3201 Cherokee Street",
"Latitude": 38.59,
"Longitude": -90.2369742,
"Position": "38.5949207, -90.2369742",
"ImageURL": "-"
}, {
"ID": 2,
"Name": "2 Dandilions",
"Price": 12,
"Description": "Some explaination here.....",
"Category": "Gifts for anyone",
"Type": "Other",
"URL": "flowersandweeds.com",
"Destination": "Cherokee Street",
"Location": "Flowers and Weeds, 3201 Cherokee Street",
"Latitude": 38.59,
"Longitude": -90.2369742,
"Position": "38.5949207, -90.2369742",
"ImageURL": "-"
}, {
"ID": 3,
"Name": "3 Air plants",
"Price": 6662,
"Description": "A small glass globe containing air plants, gravel, moss and crystals, comes in various designs and can brighten up your window or desk ($25) at Flowers and Weeds, 3201 Cherokee Street, flowersandweeds.com, which also sells monthly subscription boxes at various price points.",
"Category": "Gifts for anyone",
"Type": "Other",
"URL": "flowersandweeds.com",
"Destination": "Cherokee Street",
"Location": "Flowers and Weeds, 3201 Cherokee Street",
"Latitude": 38.59,
"Longitude": -90.2369742,
"Position": "38.5949207, -90.2369742",
"ImageURL": "-"
}, {
"ID": 4,
"Name": "4 Air plants",
"Price": 2325,
"Description": "A small glass globe containing air plants, gravel, moss and crystals, comes in various designs and can brighten up your window or desk ($25) at Flowers and Weeds, 3201 Cherokee Street, flowersandweeds.com, which also sells monthly subscription boxes at various price points.",
"Category": "Gifts for anyone",
"Type": "Other",
"URL": "flowersandweeds.com",
"Destination": "Cherokee Street",
"Location": "Flowers and Weeds, 3201 Cherokee Street",
"Latitude": 38.59,
"Longitude": -90.2369742,
"Position": "38.5949207, -90.2369742",
"ImageURL": "-"
}];
// Loop over all of the gifts
for (var i = 0; i < gifts.length; i++) {
// Gift information from gifts.js
// -------------------------------------------------------------
// This is how I would do it. This way is really easy to set up.
// ------------------------------------------------------------
var id = i;
var giftName = gifts[i].Name;
var giftPrice = "$" + gifts[i].Price;
var giftDescription = gifts[i].Description;
var giftLink = gifts[i].URL;
var dataBlock = "<div class='gift' data-id='" + i + "'>'
<img src='' data-original='' class='gift__image lazy'>'
<p class='gift__name'>" + giftName + "</p>'
<p class='gift__price'>" + giftPrice + "</p>'
<p class=''><span class='gift__description'>" + giftDescription + "</span> <a href='' class='gift__link'>" + giftLink + "</a>'
</p>'
<div class='gift__share'>'
<div class='gift__icons'>'
<a href='#' class='link--twitter' target='_blank'>'
<i class='fa fa-twitter' aria-hidden='true'></i>'
</a>'
<a href='#' class='link--facebook' target='_blank'>'
<i class='fa fa-facebook' aria-hidden='true'></i>'
</a>'
<a href='#' class='link--pinterest' target='_blank'>'
<i class='fa fa-pinterest-p' aria-hidden='true'></i>'
</a>'
<a href='#' target='_blank'>'
<i class='fa fa-envelope' aria-hidden='true'></i>'
</a>'
</div>'
</div>'
<a href='#' target='_blank'>'
<button class='btn btn--buy'>Buy on Amazon</button>'
</a>'
</div>";
// ---------------------------------------------------
// append to the contents
// ---------------------------------------------------
$("#contents").append(dataBlock);
}.gift {
background: #22252b;
padding: 20px;
margin-bottom: 10px;
color: #FFF;
}
.gift__link {
text-decoration: none;
color: deepskyblue;
}
.gift__icons i {
font-size: 20px;
margin: 5px;
}
.gift__icons a {
text-decoration: none;
color: #FFF;
float: right;
}
.gift__icons a:hover {
opacity: 0.7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b64737b88c.js"></script>
<div id="contents"></div>相关文章：
- 多维关联数组的最后一个索引
- 循环以检查数组中的最后一个图像
- 如何从对象数组中获取最后一项
- 从数组JavaScript中删除并返回最后n个项的最快方法
- JavaScript，数组和函数 - 只有数组的最后一个元素有效
- 为什么我的php数组只返回最近/最后发布的活动
- 在JavaScript数组中查找最后一个元素的计算效率最高的方法
- 如何在Javascript中的对象数组的最后一个对象之后附加几个新对象
- AJAX只将数组的最后一个元素传递给MVC 5控制器
- 从数组中移除最后一个项(而不是返回项）
- PHP:获取关联数组中最后一个元素
- 我必须创建一个函数，该函数返回传入的数组的最后一个元素
- 使用handlers.js模板以数组中的最后一项为条件
- jquery修剪数组中的最后2个零
- Javascript事件处理程序总是被添加到数组中的最后一个对象
- Javascript - 循环访问对象数组，仅显示最后一个对象
- 如何推送到实际对象的数组最后状态，清除它并像新对象一样单独编辑
- 数组最后一个单元格中不需要的对象
- 可以使用Array.splice(）通过在数组最后一个元素之外的索引处添加元素来创建稀疏数组吗
- Javascript映射数组最后一项
