title: jQuery homemade slideshow code seems to be not picking up the current context of the images
body: <p>I know this is going to be a simple problem but I've been looking at it all day and struggling to find an answer so hopefully you  wonderful people will be able to help.</p>
  
  <p>I have created my own javascript function making use of jQuery to create a slideshow. I know there are loads of free ones out there that I could use but the few that i tried did not allow multiple slideshows on the same page and that got me thinking that this shouldn't be too difficult to do.</p>
  
  <p>On the page I have 2 of these div elements containing images</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;img src="./images/Hashimadisaster.png" alt="" title="Hashima Island" class="alignnone size-full wp-image-842"&gt;
      &lt;img src="./images/DSCN3674-1024x767.jpg" alt="" title="Legs glued together" class="alignnone size-large wp-image-834"&gt;
      &lt;img src="./images/DSCN3672-768x1024.jpg" alt="" title="The front and rear legs together standing on an Eldar Falcon" class="alignnone size-large wp-image-836"&gt;
      &lt;img src="./images/DSCN3671-1024x768.jpg" alt="" title="Left rear leg glued into position and balanced to stand on its own" class="alignnone size-large wp-image-835"&gt;
      &lt;img src="./images/conseptiual-drawing-for-titan-base-1024x609.jpg" alt="Conceptual drawing for titan base" title="Conceptual drawing for titan base" class="alignnone size-large wp-image-841"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the javascript code</p>
  
  <pre><code>1. function slidermethod(){
  2.  var HeightOfBox= 400;
  3.  var timeoutmilliseconds = 3000;
  4.  if($('.slider').length){
  5.      $('.slider').each(function(){
  6.          $(this).css("position","relative");
  7.          $(this).children('img').css("position","absolute").css("top","0").css("left","0");  
  8.          if($(this).children('img').length){
  9.              if($(this).children(".currentslide").length == 0){
  10.                 //alert($(this).children("img").length);
  11.                 //alert("1");
  12.                 // this seems to occur every time it is called
  13.                    $(this).children('img:first').addClass(".currentslide");
  14.             }
  15.             else{
  16.                 if($(this).children('.currentslide').next().length)    {    
  17.                     alert("2");
  18.                     var nextchild = $(this).children('.currentslide').next();
  19.                     $(this).children('img').removeClass('.currentslide');
  20.                     $(nextchild).addClass(".currentslide");
  21.                 }else{                  
  22.                     alert("3");
  23.                     $(this).children('img').removeClass('.currentslide');
  24.                     $(this).children('img:first').addClass(".currentslide");
  25.                 }
  26.             }               
  27.         }
  28.         $(this).children('img').css("height",HeightOfBox + "px");
  29.         $(this).css("height",HeightOfBox + "px");           
  30.     });
  31.     setTimeout("slidermethod();",timeoutmilliseconds); 
  32.        // every 3 seconds call this method
  33. }   
  34.}
  35.slidermethod(); // call the method
  </code></pre>
  
  <p>The code runs without any errors popping up and grabs all the images, resizes them and places them on top of one another. I have a css stylesheet which has .currentslide as z-index:2; and all the other images as 1. but when it gets to the bottom of the code, there is a settimeout() which calls the same method again 3 seconds later but it always seems to go into the if statement    </p>
  
  <pre><code>9.    if($(this).children(".currentslide").length == 0){
  </code></pre>
  
  <p>but if I firebug it I can see that the first image in the group of images has the class of "currentslide", so this should not be 0. not really sure why this is not working as expected.</p>