user1050619
user1050619

Reputation: 20896

Create <a> tags around divs using Jquery

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

Answers (1)

dave
dave

Reputation: 64687

You can use $.wrap for this.

$("<div id='productid" + i + "' class='product-cards'></div>")
.appendTo('#product-container')
.wrap("<a href='/product'></a>");

http://jsfiddle.net/3Kfj3/1/

Upvotes: 1

Related Questions