为什么将元素附加到先前附加的元素不起作用？

Question

我可以简单地将 append 元素添加到已附加的元素中吗？ Row存在于 google chrome 工具中，但没有子元素。 显然， 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>`)
    }
    }

数据集：

['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：小提琴

Answer 1

当您使用 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>

Answer 2

考虑以下。

 $(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>

这使用$.each()迭代数据并创建行和单元格。 我不得不对你可能想要完成的事情做出一些猜测。

查看更多： https://api.jquery.com/jquery.each/

在第一个循环中，我使用i作为索引，使用row作为数组元素（来自数组的数组）。 在第二个循环中，我使用j作为索引，使用cell作为数组中元素的值。

当循环迭代每个元素时，我创建了一个具有唯一 ID 的 DIV 元素来表示行。 然后，我在第一个循环中执行第二个循环，将 Cells 创建为 DIV 元素，这些元素附加到 DIV。

为什么将元素附加到先前附加的元素不起作用？

问题描述

2 个解决方案

解决方案1
0 已采纳 2022-06-02 15:09:38

解决方案2
0 2022-06-02 15:35:37

为什么将元素附加到先前附加的元素不起作用？

问题描述

2 个解决方案

解决方案1 0 已采纳 2022-06-02 15:09:38

解决方案2 0 2022-06-02 15:35:37

解决方案1
0 已采纳 2022-06-02 15:09:38

解决方案2
0 2022-06-02 15:35:37