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

Question

我可以简单地将元素追加到已经追加的元素上吗？ 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: Fiddle

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 元素来表示行。然后我在第一个循环中执行第二个循环以将单元格创建为 DIV 元素，这些元素附加到 DIV.

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

Why appending element to previously appended element not working?

javascript

jquery