Detaching an image then appending it back to where it was detached from

Question

My experience level - I am making a custom slider and this is my first experience with jQuery, but I think I have a pretty good handle as to what html,css and jquery do together but, still have my noob-ness going on.

My Problem - I have 17 div's marked up as such, and I would like to remove the img tag:

      <div class="slide" id="zero">
        <h2>April 1, 2011</h2>
        <img src="img/1_april12011.png"/><p>Lorem Ipsum</p>
      </div>
      <div class="slide" id="one">
        <h2>April 2011</h2>
        <img src="img/2_april2011.png"/> <p>Lorem Ipsum</p>
      </div>
      <div class="slide" id="two">
        <h2>August 2011</h2>
        <img src="img/3_aug2011.png"/><p>Lorem Ipsum</p>
      </div>

I can do this pretty easily by using .detach() and the following jQuery:

 $('.slide').delegate('click', function(){ 
      if(imageToAttach == null){
        attachLocation = $(this).find('id');
        imageToAttach = $(this).find('img').detach();
        console.log
      }else{
        $(imageToAttach).appendTo(attachLocation);
        console.log('trying to append ' + imageToAttach + ' to ' + attachLocation);
        attachLocation = $(this).find('id');
        imageToAttach = $(this).find('img').detach();
        console.log('detached ' + imageToAttach);
      }});

I am using the var = imageToAttach and attachLocation to keep track of what image was removed and where it was removed from so I can append it to that specific div again when I want to (when another image is clicked or the left and right control are clicked) so if I can get this -- http://jsfiddle.net/lorenzo_vm/nbF8d/3/ -- jsfiddle to work, then I believe I can do what I want.

few hours of research and fiddling later

I think I figured out I want to do, I am going to use .hide() and .show(), but I am still curious as to what is going on in the above mentioned fiddle...that is, how do I get the img to become re-inserted to the same div they were from when I click on another div...and if you, kind stackoverflow user, would not mind, could you also inform me of an easier way to assign the divs to an array of some sort instead of using id="zero" id="one" etc.

something like this?

var slides = $('.slide');
var numberOfSlides = slides.length;
var slideArray[] = null; 

would I just use a for loop to assign the index of slides.length to each spot in an array?

for( var i=0;i<=numberOfSlides;i++){
   slideArray[i] = ?;
}

Or is the var slides an array? I am little confused.

THANKS SO MUCH!

• Michael

Answer 1

Here. I updated your fiddle to do what I think is what you're looking for - mostly. Not too sure though since this behavior is odd to me and I don't know exactly why one would want to do this...

http://jsfiddle.net/nbF8d/12/

here is the relevant code, which can be condensed to this:

$(document).ready(function(){
    var imageToAttach;
    var attachLocation;

    $('.slide').on('click', function(){ 
      if(imageToAttach != null){
        $(imageToAttach).appendTo(attachLocation);
      }

      attachLocation = $(this);
      imageToAttach = $(this).find('img').detach();
   });
});
​

Essentially, you were trying to find an element "id" when you should just store the reference to the element clicked.

attachLocation = $(this);

That way appendTo has an element instead of just the value of an id (assuming you fetched the actual id by using $(this).attr('id'))

Also your example did not declare the vars or place the listener in the ready call.

Also notice I switched to .on instead of .delegate - see this: "As of jQuery 1.7, .delegate() has been superseded by the .on() method."