Why appending element to previously appended element not working?-CodePudding

Can I simply append element to already appended element? Row exists in google chrome tools, but there are no child elements. Obviously, if case alerts "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']

Jsfiddle: Fiddle

CodePudding user response：

When you use append, you need to wrap in $(...) too. :)

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;" >${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>

CodePudding user response：

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/[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>

This uses $.each() to iterate over the data and create the Rows and Cells. I had to make some guesses on what you might be trying to accomplish.

See more: 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). In the second loop, I use j as the Index, and cell as the value of the element in the Array.

As the loop iterates each element, I create a DIV Element with a unique ID, to represent the Row. I then perform a second loop inside the first to create the Cells as DIV elements, which are appended to the DIV.