Question

I am working with jQuery. Here I have an html page. In the html I have two div’s. The first div contains an image, a name and a price. Right now we have to move the image to another div which is empty. Here I move the image form the first to the second div. The problem is to find the id of image. I need to find the ID of the moved image.

Here is my HTML.

   <div>
    <span class="span1">
        <img src="~/Images/galaxy.jpeg" />
    </span>
    <span class="span1">1232</span>
    <span class="span2">Cell Phone</span>
    <span class="span1">3500</span>
    <a href="#" class="pull-right"><i class="icon-plus" onclick="AddToCart(this)" id="btnid"></i></a>
  </div>
  <div class="span7" style="border:1px black" id="separat"></div>

And My jQuery code:

$(function() {
    AddToCart(this);
});

function AddToCart(obj) {
    var val = 0;
    var $this = $(obj).closest('div');
    var img = $this.find('img');
    var image = img;
    $('#separat').append(img);
}​

Here I am adding the image to the second div. I need to get the image ID of the moved or added.

Answer 1

You need to specify an ID attribute to begin with and let’s not use an onclick attribute:

    <div>
      <span class="span1">
      <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Small.png" width=20 id="galaxy" />
      </span>
      <span class="span1">1232</span>
      <span class="span2">Cell Phone</span>
      <span class="span1">3500</span>
      <a href="#" class="pull-right"><i class="icon-plus" id="btnid">+</i></a>
   </div>
  <hr>
   Cart:
   <div class="span7" style="border:1px black" id="separat"></div>

And update your jQuery:

   function AddToCart() {
     var img = $(this).closest('div').find('img').first();
     var image_id = $(img).attr('id');
     var newobj = $('<div>');
     newobj.prepend(img.clone());
     newobj.append('<span>' + image_id + '<span>');
     $('#separat').append(newobj); 
   }

   $(function(){
     $('.icon-plus').click(AddToCart);
   });

SEE:

https://gist.github.com/4124585