¿Puedo simplemente agregar un elemento a un elemento ya agregado? Row existe en las herramientas de Google Chrome, pero no hay elementos secundarios. Obviamente, if el caso alerta "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>`) } }Conjunto de datos:
['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: violín
Cuando usa agregar, también necesita envolver $(...) . :)
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>Considera lo siguiente.
$(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> Esto usa $.each() para iterar sobre los datos y crear Filas y Celdas. Tuve que hacer algunas conjeturas sobre lo que podría estar tratando de lograr.
Ver más: https://api.jquery.com/jquery.each/
En el primer bucle, uso i como índice y row como elemento de matriz (de una matriz de matrices). En el segundo bucle, utilizo j como índice y cell como el valor del elemento en la matriz.
A medida que el ciclo itera cada elemento, creo un elemento DIV con una ID única para representar la fila. Luego realizo un segundo ciclo dentro del primero para crear las celdas como elementos DIV, que se agregan al DIV.