在JS for循环元素中，你如何对循环中的那些元素进行操作？

Question

原始代码：

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
}

为响应提供抱歉坦克，但我猜问题不明确，我正在转向后一个代码（JS）。我希望后一个代码复制与前者相同的功能，但目前它没有。 item_boxes[i].find在.find上引发了无方法错误，因此我找到了querySelector，找到了对象，但没有.text方法来更改文本。

基本上代码正在做的是查看所有item_boxes，并在每个price上更改子flex元素的文本。

Answer 1

使用eq(id)方法获取jQuery对象。 继续bulk_insert_buffer_size | 8388608 innodb_buffer_pool_chunk_size | 134217728 innodb_buffer_pool_dump_at_shutdown | ON innodb_buffer_pool_dump_now | OFF innodb_buffer_pool_dump_pct | 25 innodb_buffer_pool_filename | ib_buffer_pool innodb_buffer_pool_instances | 1 innodb_buffer_pool_load_abort | OFF innodb_buffer_pool_load_at_startup | ON innodb_buffer_pool_load_now | OFF innodb_buffer_pool_size | 134217728 innodb_change_buffer_max_size | 25 innodb_change_buffering | all innodb_log_buffer_size | 16777216 innodb_sort_buffer_size | 1048576 join_buffer_size | 262144 key_buffer_size | 8388608 myisam_sort_buffer_size | 41943040 net_buffer_length | 16384 preload_buffer_size | 32768 read_buffer_size | 65536 read_rnd_buffer_size | 262144 sort_buffer_size | 262144 sql_buffer_result | OFF 。

data()

注意使用for循环，所有变量都被提取到它的函数作用域，在本例中更为虚构。如果要将变量保持在一起，请使用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]); } 。

没有jQuery：

$.each(items, function(i, item){/*vars*/})

Answer 2

您可以使用ES6 Map方法

这就像

textPayNote.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean b) {
            if (focused) {
                textPayNote.setText("0.00");
            }
        }
    });

Answer 3

关注JQuery docs示例：

$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});

Answer 4

$.each有两个参数。第一个是它所谓的索引，第二个是它所谓的元素。

至于＆＃34;表演＆＃34;关于数据，这取决于你是否在谈论操纵你正在迭代的内容，或者你是否只是操纵函数返回的值。

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

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

Answer 5

如果没有jQuery，你可以通过使用现代功能和一个转发器（如果需要）来做得更好。

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

使函数名称尽可能短。