jquery - 从 div 构建一系列相关数据

Question

我需要遍历 div 及其子对象并获取要在数组中访问的数据值。我可以通过索引正确地控制台记录所有信息，并且每个循环子项，但我无法将其正确放入一个数组中，每个块都被索引，然后另一个每个循环获取该块中的子项并从每个循环中提取数据属性那些 .inner div。

目前，我确实将所有 .block div 的索引作为数组，但在每一个而不是 3 组数据属性中（即，在第一个具有三个 .inner div 的 .block 中）它只拉入最后一组 - 例如7,56 而我需要它来拉动 1,43 3,34 7,56

这是我的html

<div id="wrapper">
    <div class="block">
        <div class="inner" data-a='1' data-b="43"></div>
        <div class="inner" data-a="3" data-b="34"></div>
        <div class="inner" data-a="7" data-b="56"></div>
    </div>
    <div class="block">
        <div class="inner" data-a='3' data-b="76"></div>
        <div class="inner" data-a="9" data-b="67"></div>
    </div>
    <div class="block">
        <div class="inner" data-a='5' data-b="33"></div>
        <div class="inner" data-a="4" data-b="22"></div>
    </div>
</div>

和 jQuery：

frame  = $('.block');
blockNo = [];

frame.each(function( index ) {
    blockNo.push(index);
    $(this).children().each(function() {
        cell = $(this);
        blockNo[index] = [cell.data('a'),cell.data('b')];
    });      
});

Answer 1

和

blockNo.push(index);

你建立一个索引号数组。
只需使用

blockNo.push([cell.data('a'),cell.data('b')]);

方法里面each。

Answer 2

我相信问题出在

blockNo[index] = [cell.data('a'),cell.data('b')];

您正在执行的 div.block 的子元素的每次迭代 blockNo[index]，它会不断替换旧值，因此您只能获得第三组。

这应该工作

frame  = $('.block');
blockNo = [];

frame.each(function( index ) {

 $(this).children().each(function() {
    cell = $(this);
    blockNo.push([cell.data('a'),cell.data('b')])
 });      
});

Answer 3

您必须分别构建每个“行”元素：

var frame = $('.block');
var blockNo = [];

frame.each(function( index ) {
    // a new array ("row") for each .block element
    var row = [];

    // fill it up with values
    $(this).children().each(function() {
        row.push([this.getAttribute("data-a"), this.getAttribute("data-b")]);
    });

    // add it to blockNo
    blockNo.push(row);
});

我还创建了frame局部blockNo变量（这几乎是人们一直想要的），并.data用直接的 DOM替换了对的调用getAttribute。如果您一般不打算访问这些信息，.data那么完全不涉及 jQuery 的数据存储工具会更有效。

Answer 4

使用.map()和.get()：

演示

var blocksArray = $('.block').find('.inner').map(function(){
    return [[$(this).data('a'),$(this).data('b')]];
}).get();