How to choose a selector that has a variable in it? (Javascript, jQuery, DOM)

Question

I have been struggling with this for days, I have a function that takes in an object and loops through it creating rows with display columns in it (bootstrap), so I am using jQuery in order to select an id with a value from the object itself and appending to it, but for some reason the id selector that contains the variable is not seen and does not append to the div with the id?

function add_to_page(product) {
 //this is the main row that will contain the columns
 var rows = $('<div class="row" ></div>'); 
 for (var category in products) {
    for (var i = 0; i < products[category].length; i++) {
      rows.append($("<div id='" +products[category][i].id +"'></div>").html($('<img>').attr('src', products[category][i].img)));
      //the below code is never executed it only creates the image and stops appending after that
      $('#' + products[category][i].id).append($('<div class=name>').text(products[category][i].name));
      $('#' + products[category][i].id).append($('<div class=category>').text(products[category][i].category));
      $('#' + products[category][i].id).append($('<div class=price>').text('Price: ' + products[category][i].price + 'L.E'));
      $('#' + products[category][i].id).addClass('col-md-3');
      //the below code is to create a new row after filling each row with 4 display columns 
      if ( i % 3 == 0 && i != 0 ) {
        $('#content').append(rows.clone(true));
        rows = $('<div class="row"></div>');
      }
    }
  }
}

here is the html i am trying to append to:

<div class="container full-width">
  <div id="content"></div>
</div>

i am calling the function normally , no error in the console

add_to_page(products);

Answer 1

You cannot use a selector to find an element you have not yet added to the document (unless you use the second argument of $(selector, context)). But for your purposes, you can just use the fact that the append method can accept more than one argument.

With some other changes to make your code more jQuery-like, you get this:

function add_to_page(products) {
    //this is the main row that will contain the columns
    var rows = $('<div>').addClass("row"); 
    for (var category in products) {
        for (var item of products[category]) {
            rows.append(
                $("<div>").attr("id", item.id).addClass('col-md-3').append(
                    $('<img>').attr('src', item.img),
                    $('<div>').addClass('name').text(item.name),
                    $('<div>').addClass('category').text(item.category),
                    $('<div>').addClass('price').text('Price: ' + item.price + 'L.E')
                )
            );
            //the below code is to create a new row after filling each row with 3 display columns 
            if ( rows.children().length >= 3 ) {
                $('#content').append(rows);
                rows = $('<div>').addClass("row"); 
            }
        }
    }
    // Flush any rows that were not yet added:
    if ( rows.children().length ) {
        $('#content').append(rows);
    }
}

// Sample data
var products = {
    fruit: [{
        name: 'apple',
        price: 2.20,
        img: "https://www.colourbox.com/preview/7011130-apples-on-table-and-knife.jpg",
        category: 'fruit'
    }, {
        name: 'kiwi',
        price: 3.10,
        img: "https://www.colourbox.com/preview/10157893-kiwi-fruit.jpg",
        category: 'fruit'
    }, {
        name: 'banana',
        price: 1.50,
        img: "https://www.colourbox.com/preview/6294218-banana.jpg",
        category: 'fruit'
    }],
    vegetables: [{
        name: 'lettuce',
        price: 0.90,
        img: "https://www.colourbox.com/preview/2347661-fresh-salad-leaves-assortment-in-a-basket.jpg",
        category: 'vegetables'
    }, {
        name: 'radish',
        price: 1.60,
        img: "https://www.colourbox.com/preview/3602479-red-radish.jpg",
        category: 'vegetables'
    }]
};

add_to_page(products);

.col-md-3 { display: inline-block; margin: 5px }
img { max-width: 100px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container full-width">
  <div id="content"></div>
</div>

Answer 2

Use @trincot's superior answer, but note that you can also pass an entire HTML string into jQuery's .html(). E.G:

function add_to_page(products) { 
  var $content = $("#content"), 
      cols=3, //number of columns
      $row, 
      i=0;
 
 for (var category in products) {
    for (var item of products[category]) {
      if(i%cols == 0){//add a new row
        $row = $("<div class='row'></div>");
        $content.append($row);
      }
      //add the item to the row
      $row.append($("<div class='col-md-"+cols+"' id='" +item.id +"'><img src='"+item.img+"' /><div class=name>"+item.name+"</div><div class=category>"+item.category+"</div><div class=price>Price: "+item.price+"L.E</div>"));
      i++;
    }
  }
}


var products = {
  "jam" : [
          {"id":1,"name":"strawberry", "category":"jam", "price":123, "img":"pic.gif"},
          {"id":2,"name":"rasberry", "category":"jam", "price":456, "img":"pic.gif"},
          {"id":3,"name":"madberry", "category":"jam", "price":123, "img":"pic.gif"},
          {"id":4,"name":"sadberry", "category":"jam", "price":456, "img":"pic.gif"}
          ],
  "bees" : [
          {"id":4,"name":"baz", "category":"bee", "price":1, "img":"pic.gif"},
          {"id":5,"name":"buzz", "category":"bee", "price":2, "img":"pic.gif"}
          ]
  };
  
//console.log(products);
add_to_page(products);

.row {display:block; border:1px solid blue;}
.row div[id] {display:inline-block; border:1px solid red; width:100px; margin:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container full-width">
  <div id="content"></div>
</div>

Answer 3

Append all your dynamic html to an element stored in a variable then append that variable to the DOM. that selector wont work bc the element you are trying to access doesnt exists yet.

Do something like:

var el = $('<div' + id + '></div>')
el.append(your row constructed html)

Then append that to your rows at the end of the 2nd for loop.

EDIT

for(.... row iteration code) {
  var el = $('<div' + id + '></div>');
  el.append('your image goes here');
  el.append('name element');
  ...
  rows.append(el);
}

Answer 4

You need to restructure the code.. are you able to find the element first rows.append($("") Instead use products.category [i].id then use jQuery wrap () to wrap the columns to row .