Creating a slider with dots representing each image, each not returning image element?
<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>
