Javascript 在jsforloop-over元素中，如何处理循环中的那些元素？

原始代码：

item_boxes = $(".item-box")
$.each(item_boxes, function() {
  var id = $(this).data("id")
  $(this).find(".price").text(price_list[id])
})

JS代码：

item_boxes = $(".item-box")
for(var i=0; i<item_boxes.length; i++) {
  var id = item_boxes[i].getAttribute("data-id")
  item_boxes[i].find... .text
  // above line doesn't work, because it's jQuery
  // item_boxes[i].querySelector(".price"), finds the child element, but then I can't figure out how to add the price info
  // item_boxes[i].querySelector(".price").innerHTML(price_list[id]) throws a nomethod error on innerHTML
}

item_box=$（“.item box”）
对于（var i=0；i，使用该方法获取jQuery对象。
继续执行
data（）

var item_boxes = $(".item-box"),
    i = 0,
    el, id;

for(; i < item_boxes.length; i++) {
    el = item_boxes.eq(i);
    id = el.data("id");
    el.find(".price").text(price_list[id]);
}

您可以使用ES6映射方法

大概是

item_boxes.map( (item_box,index) =>  {
    var id = item_box.getAttribute("data-id")
    item_box.find... .text //if you actually need to do something with the index
})

以下示例：

$。每个
都有两个参数。第一个参数是它调用的索引，第二个参数是它调用的元素

至于对数据的“操作”，这取决于您是在谈论操作您正在迭代的内容，还是只是在操作函数返回的值

要更改迭代内容，请使用索引选择迭代内容中的各个项目：

var list = [27, 43, 19];

$.each(list, function(i, element) {
    list[i] += 7
});

要更改返回的值，只需执行任何操作。它们是变量

var list = [27, 43, 19];

$.each(list, function(i, element) {
    i += 3
    element += 91
});

如果不使用jQuery，您可以通过使用现代功能和transpiler（如果需要）做得更好

for (const box of document.querySelectorAll(".item-box")) {
  box.querySelector(".price").textContent = price_list[box.dataset.id];
}

最长的部分是函数名，因此可以缩短它们

function query(root, sel) {
  return root.querySelector(sel);
}
function queryAll(root, sel) {
  return root.querySelectorAll(sel)
}

现在看起来是这样的：

for (const box of queryAll(document, ".item-box")) {
  query(box, ".price").textContent = price_list[box.dataset.id];
}

使函数名尽可能短。
el.queryselectoral（）
返回一个没有
.innerHTML
属性的列表（请注意，它是一个属性，而不是一个方法）。它应该是
el.querySelector（.price”）.innerHTML=…
。如果使用
.map（）
那么
item\u框
参数将是对单个项目的引用，因此您不需要
[index]
部分。
function query(root, sel) {
  return root.querySelector(sel);
}
function queryAll(root, sel) {
  return root.querySelectorAll(sel)
}

for (const box of queryAll(document, ".item-box")) {
  query(box, ".price").textContent = price_list[box.dataset.id];
}