How to move content as well as image to another div using jquery?

Question

Hi all iam working on jquery here i have a html page in the html i have two div's in those first div contains image name and price right now we have to move image to another div which is empty div here i had done to move image form first to secound working well i need to move as well as name and price also

this is my html :

<div id="div1"> 
  <span class="span1">
     <img src="~/Images/images.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)" ></i></a>

</div>
<div id="div1"> 
  <span class="span1">
    <img src="~/Images/images.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)" ></i></a>

</div>
actual price<input type="text" id="text1">
total price<input type="text" id="text1">

this is my another div

<div class="span7" style="border:1px black" id="separate">
  <ul class="thumbnails bootstrap-examples pre-scrollable">
    <li class="span2"> 
      <a href="#" class="pull-right">
        <i class="icon-remove" onclick="AddToCart(this)" >test
        </i>
      </a>
      <a href="#"></a>

      <h5>Starter template</h5>

      <p>500</p>
    </li>
  </ul>
</div>

here in the above i have icon-plus is the image button it's workin when i click the button the image is moving to destination folder i need to move name and price also and in the same time i have two text boxex the price shold add when user select the two images

this is my jquery

function AddToCart(obj) {

}

function AddToCart(obj) {
    var $this = $(obj).closest('div');
    var img = $this.find('img');
    $('#separate').append(img);
}

http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element — corn3lius, Nov 20 '12 at 14:07

score 1 · Answer 1 · answered Nov 20 '12 at 15:11

First, I would add more descriptive class names to the elements you would like to move.

<div class="item" id="div1">
    <span class="span1">
        <img src="~/Images/images.jpeg" />
    </span>
    <span class="span1">1232</span>
    <span class="span2 name">Cell Phone</span>
    <span class="span1 price">3500</span>
    <a href="#" class="pull-right"><i class="icon-plus">Add</i></a>
</div>

<div class="span7" id="separate">
    <!-- #separate markup -->
</div>

Next I would move the click event handler to a script block. Inside here, you can add an array of the selectors you would like to move, which you can then iterate through, clone and append to a document fragment (via Jon Resig's article on DOM Document Fragments). Then you just have to append the document fragment to your #separate div.

<script>
    (function($){
        $("body").delegate(".item a", "click", function(event){
            event.preventDefault();
            item = $(this).closest(".item");
            elems = ["img", ".name", ".price"];
            fragment = document.createDocumentFragment();

            for (var i = 0; i < elems.length; i++){
                el = item.find(elems[i]);
                fragment.appendChild(el[0]);
            }

            $("#separate").append(fragment);
        });
    })(jQuery);
</script>

Here's a jsFiddle to demonstrate this - http://jsfiddle.net/9txqc/

sorry documentFragment dosen't supports to my iE thanks for my reply — Sadda-shutu, Nov 20 '12 at 15:32

Eric Frick · Answer 2 · 2012-11-20T15:03:38.237

0

function AddToCart(obj) {
          var $this = $(obj).parents('div');
          $('#separate').append($this);
      }


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

HTML:

<div id="div1"> 
  <span class="span1">
     <img src="~/Images/images.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"></i></a>

</div>
<div id="div2"> 
  <span class="span1">
    <img src="~/Images/images.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)" ></i></a>

</div>
actual price<input type="text" id="text1">
total price<input type="text" id="text2">

edited Nov 20 '12 at 15:03

answered Nov 20 '12 at 14:10

Eric Frick

847
1
7
18

no @Eric it's working i need to get content also like price and name – Sadda-shutu Nov 20 '12 at 14:28
no @Eric getting error 0x800a139e - Microsoft JScript runtime error: DOM Exception: HIERARCHY_REQUEST_ERR (3) – Sadda-shutu Nov 20 '12 at 14:43
You can't have duplicated ids – Eric Frick Nov 20 '12 at 15:04

How to move content as well as image to another div using jquery?

2 Answers2