title: Creating a slider with dots representing each image, each not returning image element?
body: <p>Javascript:</p>
  
  <pre><code>var images = $('#slideshow').children();
  
  var dot_holder = $('#slider_dots');
  /* Create the dots*/
  
  images.each(function(index,item){
  
      if(item.hasClass('active')){
          dot_holder.append('&lt;img src="Images/dot_solid.png" alt=""/&gt;');
      }else{
          dot_holder.append('&lt;img src="Images/dot_fade.png" alt=""/&gt;');
      }
  
  
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="slideshow"&gt;
                      &lt;img src="Images/image_1.jpg" alt="image 1" class="active"/&gt;
                      &lt;img src="Images/image_2.jpg" alt="image 2"/&gt;
                      &lt;img src="Images/image_3.jpg" alt="image 3"/&gt;
                      &lt;img src="Images/image_4.jpg" alt="image 4"/&gt;
                      &lt;img src="Images/image_5.jpg" alt="image 5"/&gt;
                      &lt;img src="Images/image_6.jpg" alt="image 6"/&gt;
                      &lt;img src="Images/image_7.jpg" alt="image 7"/&gt;
  
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>Essentially, I want the dot to be solid representing the active image, however I get an error saying Uncaught TypeError: Object # has no method 'hasClass'</p>