为什么将元素附加到先前附加的元素不起作用？
[英]Why appending element to previously appended element not working?
问题描述
Can I simply append element to already appended element?
我可以简单地将 append 元素添加到已附加的元素中吗？ Row exists in google chrome tools, but there are no child elements. Row存在于 google chrome 工具中，但没有子元素。 Obviously, if case alerts "No".显然， if case 提示“No”。
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>`)
}
}
Dataset:数据集：
['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']
2 个解决方案
解决方案1
0 已采纳 2022-06-02 15:09:38
When you use append, you need to wrap in $(...) too.当您使用 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%" class="row" id="row_${row_index}"/>`); el.appendTo($('#data-screen')); row_index += 1; for (let elem of row) { $(`<div style="border-bottom:1px solid black;" class="test col-md-${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>
解决方案2
0 2022-06-02 15:35:37
Consider the following.考虑以下。
$(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/bootstrap@5.1.3/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>
This uses $.each() to iterate over the data and create the Rows and Cells.这使用$.each()迭代数据并创建行和单元格。 I had to make some guesses on what you might be trying to accomplish.我不得不对你可能想要完成的事情做出一些猜测。
See more: https://api.jquery.com/jquery.each/查看更多： https://api.jquery.com/jquery.each/
In the first loop, I use i as the Index and row as the Array element (from an Array of Arrays).在第一个循环中，我使用i作为索引，使用row作为数组元素（来自数组的数组）。 In the second loop, I use j as the Index, and cell as the value of the element in the Array.在第二个循环中，我使用j作为索引，使用cell作为数组中元素的值。
As the loop iterates each element, I create a DIV Element with a unique ID, to represent the Row.当循环迭代每个元素时，我创建了一个具有唯一 ID 的 DIV 元素来表示行。 I then perform a second loop inside the first to create the Cells as DIV elements, which are appended to the DIV.然后，我在第一个循环中执行第二个循环，将 Cells 创建为 DIV 元素，这些元素附加到 DIV。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.