jQuery/JS 中的动态多维数组

Question

我想在jQuery/JS中创建一个动态多维数组。但我无法让它工作：var abc; // tried abc = [];for (var i = 0; i < 3; i++) {  $('#' + i).children().each(function() {    abc[i][] = $(this).val(); // tried with abc[i].push(), abc[i][n] = ...  });}预期结果：Array (2)0 Array (1)0 ["abc", "abc", "abc", "abc", "abc", "abc"] (6)1 Array (1)0 ["abc", "abc", "abc", "abc", "abc", "abc"] (6)有人可以给我提示吗？ERROR: undefined is not an object或Unexpected token ']'

Answer 1

在 jQuery/JS 中创建动态多维数组

创建基数组，然后每个第一个维度初始化为一个新数组，以便可以将值推送到第二个维度中。

var arr = [];

for (var i = 0; i < 3; i++) {

  arr[i] = [];

  $('#div' + i).children().each(function() {

    arr[i].push(this.value);

  });

}

var arr = [];

for (var i = 0; i < 3; i++) {

  arr[i] = [];

  $('#div' + i).children().each(function() {

    arr[i].push(this.value);

  });

}

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrapper' id="div0">

      <input type='text' value="abc1-1">

      <input type='text' value="abc1-2">

      <input type='text' value="abc1-3">

      <input type='text' value="abc1-4">

      <input type='text' value="abc1-5">

    </div>

    <div class='wrapper' id="div1">

      <input type='text' value="abc2-1">

      <input type='text' value="abc2-2">

      <input type='text' value="abc2-3">

      <input type='text' value="abc2-4">

      <input type='text' value="abc2-5">

    </div>

    <div class='wrapper' id="div2">

      <input type='text' value="abc3-1">

      <input type='text' value="abc3-2">

      <input type='text' value="abc3-3">

      <input type='text' value="abc3-4">

      <input type='text' value="abc3-5">

    </div>

地图的解决方案是什么

使用 jquery：

您可以使用 jquery 而不是循环访问 .children.each.map

var arr = [];

for (var i = 0; i < 3; ++i) {

  arr.push($('#div' + i + ">*").map((i,e)=>e.value).toArray());

}

// start with an empty array

var arr = [];

for (var i = 0; i < 3; ++i) {

  arr.push($('#div' + i + ">*").map((i,e)=>e.value).toArray());

}

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div0">

  <input type='text' value="abc1-1">

  <input type='text' value="abc1-2">

  <input type='text' value="abc1-3">

  <input type='text' value="abc1-4">

  <input type='text' value="abc1-5">

</div>

<div id="div1">

  <input type='text' value="abc2-1">

  <input type='text' value="abc2-2">

  <input type='text' value="abc2-3">

  <input type='text' value="abc2-4">

  <input type='text' value="abc2-5">

</div>

<div id="div2">

  <input type='text' value="abc3-1">

  <input type='text' value="abc3-2">

  <input type='text' value="abc3-3">

  <input type='text' value="abc3-4">

  <input type='text' value="abc3-5">

</div>

去掉循环0..3的脆性硬编码，你可以给每个“包装器”添加一个类（或者使用和每个在外部）$("#0,#1,#2")

var arr = [];

$(".wrapper").each((i, e) =>

  arr.push($(e).find(">*").map((ii, ee) => ee.value).toArray())

);

var arr = [];

$(".wrapper").each((i, e) =>

  arr.push($(e).find(">*").map((ii, ee) => ee.value).toArray())

);

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrapper' id="div0">

  <input type='text' value="abc1-1">

  <input type='text' value="abc1-2">

  <input type='text' value="abc1-3">

  <input type='text' value="abc1-4">

  <input type='text' value="abc1-5">

</div>

<div class='wrapper' id="div1">

  <input type='text' value="abc2-1">

  <input type='text' value="abc2-2">

  <input type='text' value="abc2-3">

  <input type='text' value="abc2-4">

  <input type='text' value="abc2-5">

</div>

<div class='wrapper' id="div2">

  <input type='text' value="abc3-1">

  <input type='text' value="abc3-2">

  <input type='text' value="abc3-3">

  <input type='text' value="abc3-4">

  <input type='text' value="abc3-5">

</div>

扩展此内容，看起来您可以使用嵌套映射：

var arr = $(".wrapper").map((i, e) => $(e).find(">*").map((ii, ee) => ee.value).toArray()).toArray();

但是，正如您将从代码片段中看到的那样，这会扁平化最终数组。

var arr = $(".wrapper").map((i, e) => $(e).find(">*").map((ii, ee) => ee.value).toArray()).toArray();

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrapper' id="div0">

  <input type='text' value="abc1-1">

  <input type='text' value="abc1-2">

  <input type='text' value="abc1-3">

  <input type='text' value="abc1-4">

  <input type='text' value="abc1-5">

</div>

<div class='wrapper' id="div1">

  <input type='text' value="abc2-1">

  <input type='text' value="abc2-2">

  <input type='text' value="abc2-3">

  <input type='text' value="abc2-4">

  <input type='text' value="abc2-5">

</div>

<div class='wrapper' id="div2">

  <input type='text' value="abc3-1">

  <input type='text' value="abc3-2">

  <input type='text' value="abc3-3">

  <input type='text' value="abc3-4">

  <input type='text' value="abc3-5">

</div>

使用 vanilla javascript

这些天还有一个Array.prototype.map函数（“这些天” - 它已经存在了一段时间......但不是永远），你可以使用。坚持使用vanilla js来获取DOM元素（请参阅下面的使用jquery并转换为数组）以及一些ES6幻想从HTMLCollection转换为数组，给出了一个衬里：

var arr = [...document.getElementsByClassName("wrapper")].map((e)=>[...e.children].map((ee)=>ee.value))

console.log(arr);

这个位将HTMLCollection转换为数组，因此我们可以使用js .map[...document.getElementsByClassName("wrapper")]

var arr = [...document.getElementsByClassName("wrapper")].map((e)=>[...e.children].map((ee)=>ee.value))

console.log(arr);

<div class='wrapper' id="div0">

  <input type='text' value="abc1-1">

  <input type='text' value="abc1-2">

  <input type='text' value="abc1-3">

  <input type='text' value="abc1-4">

  <input type='text' value="abc1-5">

</div>

<div class='wrapper' id="div1">

  <input type='text' value="abc2-1">

  <input type='text' value="abc2-2">

  <input type='text' value="abc2-3">

  <input type='text' value="abc2-4">

  <input type='text' value="abc2-5">

</div>

<div class='wrapper' id="div2">

  <input type='text' value="abc3-1">

  <input type='text' value="abc3-2">

  <input type='text' value="abc3-3">

  <input type='text' value="abc3-4">

  <input type='text' value="abc3-5">

</div>

现在，这使用嵌套的.map（js .map不是jquery .map），并且确实返回预期的多维数组。

使用jquery选择器和javascript map

最后，将jquery选择器的简洁性（或者也许您已经将它们作为jquery对象，因此不想重新选择它们，任何理由都很好）与js .map相结合，以获得比vanilla版本（稍微）短的代码中的嵌套映射：

var arr = $(".wrapper").toArray().map(e=>$(">*",e).toArray().map(ee=>ee.value));

console.log(arr);

这里：返回一个DOM元素数组，所以我们可以使用js .map。$(selector).toArray()

var arr = $(".wrapper").toArray().map(e=>$(">*",e).toArray().map(ee=>ee.value));

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrapper' id="div0">

  <input type='text' value="abc1-1">

  <input type='text' value="abc1-2">

  <input type='text' value="abc1-3">

  <input type='text' value="abc1-4">

  <input type='text' value="abc1-5">

</div>

<div class='wrapper' id="div1">

  <input type='text' value="abc2-1">

  <input type='text' value="abc2-2">

  <input type='text' value="abc2-3">

  <input type='text' value="abc2-4">

  <input type='text' value="abc2-5">

</div>

<div class='wrapper' id="div2">

  <input type='text' value="abc3-1">

  <input type='text' value="abc3-2">

  <input type='text' value="abc3-3">

  <input type='text' value="abc3-4">

  <input type='text' value="abc3-5">

</div>