我可以簡單地將元素附加到已經附加的元素嗎？Row存在于 google chrome 工具中，但沒有子元素。顯然，if案例提醒“否”。
var row_index = 0;
for (let row of object_data){
$("#data-screen").append(`<div style='width:100%' class='row' id='row_${row_index}'></div>`)
row_index = 1;
for (let elem of row){
if ($(`#row_${row_index}`).length > 0){
alert("yes")
}
else {alert("no")}
$(`#row_${row_index}`).append(`<div style='border-bottom:1px solid black;' class='col-md-${column_counter}'>${elem}</div>`)
}
}
資料集：
['3240', 'Job for Python', 'Jobs', 'Mon, 30 May 2022 14:41:37 GMT']
['3241', 'OratorClub & VmesteRosta', 'Club', 'Mon, 30 May 2022 14:41:37 GMT']
['3242', 'DriverClub', 'Drivers', 'Mon, 30 May 2022 14:41:37 GMT']
Jsfiddle： 小提琴
uj5u.com熱心網友回復：
當你使用 append 時，你也需要換行$(...)。:)
let object_data = [
['3240', 'Job for Python', 'Jobs', 'Mon, 30 May 2022 14:41:37 GMT'],
['3241', 'OratorClub & VmesteRosta', 'Club', 'Mon, 30 May 2022 14:41:37 GMT'],
['3242', 'DriverClub', 'Drivers', 'Mon, 30 May 2022 14:41:37 GMT']
]
let column_counter = 4;
function getInfo() {
let row_index = 0;
for (let row of object_data) {
let el = $(`<div style="width:100%" id="row_${row_index}"/>`);
el.appendTo($('#data-screen'));
row_index = 1;
for (let elem of row) {
$(`<div style="border-bottom:1px solid black;" hljs-subst">${column_counter}">${elem}</div>`).appendTo(el);
}
}
}
getInfo()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<div style="height:95vh" id="data-screen">
</div>
</body>
</html>uj5u.com熱心網友回復：
考慮以下。
$(function() {
var object_data = [
['3240', 'Job for Python', 'Jobs', 'Mon, 30 May 2022 14:41:37 GMT'],
['3241', 'OratorClub & VmesteRosta', 'Club', 'Mon, 30 May 2022 14:41:37 GMT'],
['3242', 'DriverClub', 'Drivers', 'Mon, 30 May 2022 14:41:37 GMT']
];
$.each(object_data, function(i, row) {
// Create the Row
$("<div>", {
class: "row",
id: "row_" i
}).appendTo("#data-screen");
// Create the Cells, append to Row
$.each(row, function(j, cell) {
$("<div>", {
class: "col col-md-" row.length " bottom-border",
}).html(cell).appendTo("#row_" i);
});
});
});.bottom-border {
border-bottom: 1px solid black;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:95vh" id="data-screen">
</div>這用于$.each()迭代資料并創建行和單元格。我不得不對你可能想要完成的事情做出一些猜測。
查看更多：https ://api.jquery.com/jquery.each/
在第一個回圈中，我使用i索引和row陣列元素（來自陣列陣列）。在第二個回圈中，我將j其用作索引，并將cell其用作陣列中元素的值。
當回圈迭代每個元素時，我創建了一個具有唯一 ID 的 DIV 元素來表示行。然后我在第一個回圈中執行第二個回圈，將單元創建為 DIV 元素，這些元素附加到 DIV。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485374.html
標籤：javascript jQuery