jQuery/JS 中的动态多维数组

在 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.mapvar arr = [];for (var i = 0; i < 3; ++i) {  arr.push($('#div' + i + ">*").map((i,e)=>e.value).toArray());}// start with an empty arrayvar 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>

jQuery/JS 中的动态多维数组

1回答