0

すべてにデータIDが追加されているアイテムのリストをループしようとすると、基本的にこれらの各値を配列にプッシュしたいのですが、これをどのように実現できるか、またはループインデックスをどこに配置する必要があるか、コードI'これまでに得たものは次のとおりです。

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 に答える
-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を設定する理由の1つ。（しかし、それは問題ではありません）

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,、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 に答える