Reputation: 20896
I'm using Jquery to create multiple products within a page using the below code..
$("#product-container").empty()
slicedata.forEach(function(e,i,a){
var obj = e;
i = parseInt(obj.id)
$("<a href = /product >").appendTo('#product-container')
$("<div id = productid" + i + " class = product-cards </div>").appendTo('#product-container')
$("<div id='product" + i + "left' class='product-cards-left' style='background-image:url( " + imagepath_start + obj.image_caption + ")'> </div>").appendTo('#productid' + i);
$("<div id = product" + i + "right class = product-cards-right> </div>").appendTo('#productid' + i )
$("<label><b> Price: <b></label> <label>" + '$' + obj.price + "</label><br>").appendTo('#product' + i +"right" )
$("<label><b> Old Price: <b></label> <label>" + '$' + obj.old_price + "</label><br>").appendTo('#product' + i +"right" )
$("<label><b> Author Name: <b></label> <label>" + obj.author_name + "</label>").appendTo('#product' + i +"right" )
$("<div id= elementid style='display:none' >"+ obj.id+" </div>").appendTo('#product' + i +"right" )
})
Now,I need to add an <a>
tag around the divs, so that when the user clicks the product card he will be taken to the details page...
I'm using the <a>
tag to build around each product using the below stmt but it creates the <a>
and closes it immediately..I need to close the <a>
after all the divs(ie; products are created).
$("<a href = /product >").appendTo('#product-container')
Upvotes: 0
Views: 42