如何遍历项目列表并将其数据值推送到数组中

How can i loop through a list of items and push their data values into an array?

本文关键字：数据 数组 何遍历 遍历 列表 项目      更新时间：2023-09-26

尝试遍历所有添加了数据ID的项目列表，我基本上想将这些值中的每一个都推入一个数组中，但不确定如何实现这一点或我需要在哪里放置循环索引，到目前为止我得到的代码是：

.JS

// Find all boxes and length
var box = _.els.grid.children(),
          box_l = box.length,
          i = 0;
          box_arr = [];
//create array of all box datas
for ( i; i <= box_l; i++ ) {
  box_arr.push( box.data('id')[i] );
}
console.log( box_arr );

.HTML

<ul id="grid" class="clearfix">
    <li class="a" data-id="1"></li>
    <li class="b" data-id="2"></li>
    <li class="c" data-id="3"></li>
    <li class="d" data-id="4"></li>
    <li class="e" data-id="5"></li>
    <li class="f" data-id="6"></li>
    <li class="g" data-id="7"></li>
    <li class="h" data-id="8"></li>
    <li class="i" data-id="9"></li>
</ul>

您可以使用 jQuery map 方法：

​var arr = $("#grid li").map(function() {
        return $(this).data("id");
}).get();​​​​​​​

这是一个工作示例。

现有代码的问题在于，在您的情况下，data只返回一个字符串，而不是数组，因此box.data('id')[i]是未定义的。

您需要做的就是修复此行：

box_arr.push( box.data('id')[i] );

你只想在框中获取第 i 个元素的 ID：

for (i = 0; i < box_l; i++) {
  box_arr.push( box.eq(i).data('id') );
}

但是，使用 map（） 等的不同方法可能是更好（更清洁）的选择。

var ids = [];
$('li[data-id]').each(function (index, value) {
    ids.push($(value).data('id'));
});

更新，因为问题答案从未被接受。

这：只是看起来搞砸了：（见每个评论）

var box = _.els.grid.children(), // what is "_.els.grid."? _ is undefined
          box_l = box.length, 
          i = 0; //semi colon?
          box_arr = []; //no var?

我在每个变量上放置 var 的一个原因。（但这不是问题）

j查询答案：

var box = $('#grid > li');
var box_arr = [];
box.each(function() {
  box_arr.push($(this).data('id'));
});
console.log(box_arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="grid" class="clearfix">
  <li class="a" data-id="1"></li>
  <li class="b" data-id="2"></li>
  <li class="c" data-id="3"></li>
  <li class="d" data-id="4"></li>
  <li class="e" data-id="5"></li>
  <li class="f" data-id="6"></li>
  <li class="g" data-id="7"></li>
  <li class="h" data-id="8"></li>
  <li class="i" data-id="9"></li>
</ul>

注意：我一直对此投了一些反对票，但是它的编写方式box_arr = [];默认为window.box_arr = [];，只是指出这一点，以防有人认为全局JavaScript变量是个好主意（我不认为） - 这是重点，而不是风格部分（我真的不在乎这两种方式）

但更重要的是，也许_.els.grid.children()问题中未定义_，所以这是一行无用的行，也可能var box = undefined,这就是为什么 OP 代码实际上在发布时失败的原因。

更新为代码片段以显示代码实际有效。

HTML5 示例：

var box = document.getElementById('grid').children,
  box_l = box.length,
  i = 0,
  box_arr = [],
  numbersArray = []; // actual numbers
//put data in arrays
for (i; i < box_l; i++) {
  box_arr.push(box[i].dataset.id);
  numbersArray.push(box[i].dataset.id * 1);
}
console.log("Array:", box_arr, numbersArray);
<ul id="grid" class="clearfix">
  <li class="a" data-id="1"></li>
  <li class="b" data-id="2"></li>
  <li class="c" data-id="3"></li>
  <li class="d" data-id="4"></li>
  <li class="e" data-id="5"></li>
  <li class="f" data-id="6"></li>
  <li class="g" data-id="7"></li>
  <li class="h" data-id="8"></li>
  <li class="i" data-id="9"></li>
</ul>

没有jQuery：

var box = document.getElementById('grid').children,
  box_l = box.length,
  i = 0,
  box_arr = [];
//console.log(box, box_l);
//create array of all box datas
for (i; i < box_l; i++) {
  box_arr.push(box[i].getAttribute('data-id'));
}
console.log("Array:", box_arr);
<ul id="grid" class="clearfix">
  <li class="a" data-id="1"></li>
  <li class="b" data-id="2"></li>
  <li class="c" data-id="3"></li>
  <li class="d" data-id="4"></li>
  <li class="e" data-id="5"></li>
  <li class="f" data-id="6"></li>
  <li class="g" data-id="7"></li>
  <li class="h" data-id="8"></li>
  <li class="i" data-id="9"></li>
</ul>

相关文章：