Question

尝试遍历所有添加了data-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>

Answer 1

您可以使用jQuery map方法：

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

这是working example。

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

Answer 2

您需要做的就是解决这一问题：

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（）等的不同方法可能是更好（更清洁）的选择。

Answer 3

var ids = [];

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

Answer 4

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

这个：好像搞砸了:(见每个评论）

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

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

jQuery回答：

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,未定义，因此这是一条无用的行，也可能是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);，这就是OP代码实际失败的原因。

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

HTML5示例：

<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>

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

没有jQuery：

<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>

{{1}}

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

4 个答案: