jQuery / JS中的动态多维数组

问题描述 投票：0回答：1

我想在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 ']'

javascript jquery arrays push
1个回答
0
投票

在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 .map而不是遍历.chi​​ldren.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>

删除循环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>

使用香草javascript

这些天，还有一个可以使用的Array.prototype.map函数（“这些天”-已经有一段时间了……但不是永远）。坚持使用香草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），并且[[does返回期望的多维数组。

使用jquery选择器和javascript映射

最后，将jQuery选择器的简洁性（或者您可能已经将它们作为jquery对象，因此不想重新选择它们，任何原因都可以）与js .map相比，在（略）短的代码中获得嵌套映射比香草版本：

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

这里：$(selector).toArray()返回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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.