[英]How can I wrap each multidimensional array into html element?
我有數組
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 實現這一目標?
您可以使用Array.prototype.map 。
您希望 map 在外部數組上,以便將每個元素轉換為:
`<div>${element}</div>`
和 map 內部數組使每個元素轉換為:
`<span>${element}<span>`
你也可以使用 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>";
});
正如您在問題中提到的,我認為您有一個包含 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>
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>'); }
您可以使用
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 );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.