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

create a dynamic multidimensional array in 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>

what's the solution with map

使用jquery:

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

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>

删除脆弱的硬编码 for 循环 0..3，您可以向每个 "wrapper" 添加一个 class（或使用 $("#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>

使用原版 javascript

最近还有一个 Array.prototype.map 函数（"these days" - 它已经存在了一段时间...但不是永远），您可以使用它。坚持使用 vanilla js 来获取 DOM 元素（见下文以使用 jquery 并转换为数组）以及一些 ES6 fancyness 以从 HTMLCollection 转换为数组给出了一个班轮：

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

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

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）并且 return 预期的多维数组。

使用 jquery 选择器和 javascript 映射

最后，结合 jquery 选择器的简洁性（或者您可能已经将它们作为 jquery 对象，所以不想重新选择它们，任何原因都可以）与 js .map 到以比原版版本（略）短的代码获取嵌套地图：

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

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

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>

jQuery/JS 中的动态多维数组

dynamic multidimensional array in jQuery/JS

javascript

arrays

jquery

push