如何将每个多维数组包装到 html 元素中？

Question

我有数组

0: ['a', 'n', 'i', 'm', 'a', 'l'] 
1: ['c', 'a', 'r'] 
2: ['f', 'l', 'o', 'w', 'e', 'r']

我想将每个数组包装到 html 元素中。 例如

<div><span>c</span><span>a</span><span>r</span></div>

<div><span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>l</span></div>

如何使用 jQuery 实现这一目标？

Answer 1

您可以使用Array.prototype.map 。

您希望 map 在外部数组上，以便将每个元素转换为：

`<div>${element}</div>` 

和 map 内部数组使每个元素转换为：

`<span>${element}<span>` 

Answer 2

你也可以使用 vanilla JS。

var arr = [
  ["a", "n", "i", "m", "a", "l"],
  ["c", "a", "r"],
  ["f", "l", "o", "w", "e", "r"]
];

let html = "";

arr.forEach((letters) => {
  html += "<div>";

  letters.forEach((l) => {
    html += `<span>${l}</span>`;
  });

  html += "</div>";
});

Answer 3

正如您在问题中提到的，我认为您有一个包含 object 的数组。 您可以使用 for 循环来循环数组并使用appendTo 。

 let array =[{ 0: ['a', 'n', 'i', 'm', 'a', 'l'], 1: ['c', 'a', 'r'], 2: ['f', 'l', 'o', 'w', 'e', 'r'], }] for(let i =0;i<Object.keys(array[0]).length;i++){ for(let j =0;j<Object.values(array[0])[i].length;j++){ $("<span>"+Object.values(array[0])[i][j]+"</span>").appendTo('body'); } }

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

Answer 4

 const input = [ ['a', 'n', 'i', 'm', 'a', 'l'], ['c', 'a', 'r'], ['f', 'l', 'o', 'w', 'e', 'r'] ]; for (let i in input) { console.log('<div><span>' + input[i].join('</span><span>') + '</span></div>'); }

Answer 5

您可以使用

let arr = [
  ["a", "n", "i", "m", "a", "l"],
  ["c", "a", "r"],
  ["f", "l", "o", "w", "e", "r"]
];

let text = "";
$.each(arr, function(i, e) {
  text += "<div>";
    $.each(e, function(key, val) {
      text += "<span>" + val + "</span>";
    });
    text += "</div>";
});
$( "body" ).append( text );