0

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

4 回答 4

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

于 2012-06-11T14:14:24.203 回答
2

您可以使用 jQuerymap方法：

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

这是一个工作示例。

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

于 2012-06-11T14:09:40.460 回答
1 
var ids = [];

$('li[data-id]').each(function (index, value) {
    ids.push($(value).data('id'));
});
于 2012-06-11T14:09:22.853 回答
-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 = [];为部分（我真的不关心这两种方式）

但更重要的是，也许_.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>

于 2012-06-11T14:22:30.140 回答