亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

jQuery/JS 中的動態多維數組

jQuery/JS 中的動態多維數組

qq_笑_17 2022-08-27 10:55:38
我想在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 ']'
查看完整描述

1 回答

?
至尊寶的傳說

TA貢獻1789條經驗 獲得超10個贊

在 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>


查看完整回答
反對 回復 2022-08-27
  • 1 回答
  • 0 關注
  • 266 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號