我有陣列
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>
我已經嘗試過了
for(x=0; x<arr.length; x ){
for(k=0; k<arr[x].length; k ){
arr_html = "<span>" arr[x][k] "</span>"
}
words_html = "<div>" arr_html "</span>"
}
但輸出變成
動物
動物車
動物車 花
如何使用 jQuery 實作這一點？
uj5u.com熱心網友回復：
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>');
}uj5u.com熱心網友回復：
您可以使用Array.prototype.map。
您想映射外部陣列，以便將每個元素轉換為：
`<div>${element}</div>`
并映射內部陣列，以便將每個元素轉換為：
`<span>${element}<span>`
uj5u.com熱心網友回復：
你也可以使用 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>";
});
uj5u.com熱心網友回復：
我認為您在問題中提到了一個包含物件的陣列。您可以使用 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>uj5u.com熱心網友回復：
您可以使用
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 );
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/407180.html
標籤：
下一篇：基本的js游戲影片不流暢