Question

Javascript:

var images = $('#slideshow').children();

var dot_holder = $('#slider_dots');
/* Create the dots*/

images.each(function(index,item){

    if(item.hasClass('active')){
        dot_holder.append('<img src="Images/dot_solid.png" alt=""/>');
    }else{
        dot_holder.append('<img src="Images/dot_fade.png" alt=""/>');
    }


});

html:

<div id="slideshow">
                    <img src="Images/image_1.jpg" alt="image 1" class="active"/>
                    <img src="Images/image_2.jpg" alt="image 2"/>
                    <img src="Images/image_3.jpg" alt="image 3"/>
                    <img src="Images/image_4.jpg" alt="image 4"/>
                    <img src="Images/image_5.jpg" alt="image 5"/>
                    <img src="Images/image_6.jpg" alt="image 6"/>
                    <img src="Images/image_7.jpg" alt="image 7"/>


                </div>

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’

Answer 1

item.hasClass('active')

should be:

$(item).hasClass('active')

Because through iteration you have direct reference to the element, and hasClass is function of the jQuery object.