Im trying to do a simple removeClass and addClass to change styles on an Img.

    <div id="Pic_Viewer">
        <div id="Main_Pic_Viewer">
                <div class="Not_Selected" >
                    <img src='#' alt="PicURL_1" />
                </div>
                <div class="Not_Selected" >
                    <img src='#' alt="PicURL_2" />
                </div>
        </div>
        <div id="Small_Pic_Viewer">
            <ul>
                <li>
                    <img class="Small_Pic" src'#' alt="PicURL_1" />
                </li>
                <li>
                    <img class="Small_Pic" src='#' alt="PicURL_2" />
                </li>
            </ul>
        </div>
    </div>

I have tried doing this with the #Main_Pic_Viewer img inside div and without.

js:

$('#Small_Pic_Viewer ul li').click(
        function () {
            var ThisLI = this.firstElementChild.alt;
            var BigImgDiv = $('#Main_Pic_Viewer div');
            var CurDiv;

            for (var i = 0, l = BigImgDiv.length; i < l; i++) {
                CurDiv = BigImgDiv[i];
                if (BigImgDiv[i].children[0].alt === ThisLI) {
                    CurDiv.removeClass('Not_Selected').addClass('Selected');
                } else {
                    CurDiv.removeClass('Selected');
                };
            };
        }
    );

Not sure why im getting this error message, as removeClass() is working fine in other methods.

Im trying to do a simple removeClass and addClass to change styles on an Img.

    <div id="Pic_Viewer">
        <div id="Main_Pic_Viewer">
                <div class="Not_Selected" >
                    <img src='#' alt="PicURL_1" />
                </div>
                <div class="Not_Selected" >
                    <img src='#' alt="PicURL_2" />
                </div>
        </div>
        <div id="Small_Pic_Viewer">
            <ul>
                <li>
                    <img class="Small_Pic" src'#' alt="PicURL_1" />
                </li>
                <li>
                    <img class="Small_Pic" src='#' alt="PicURL_2" />
                </li>
            </ul>
        </div>
    </div>

I have tried doing this with the #Main_Pic_Viewer img inside div and without.

js:

$('#Small_Pic_Viewer ul li').click(
        function () {
            var ThisLI = this.firstElementChild.alt;
            var BigImgDiv = $('#Main_Pic_Viewer div');
            var CurDiv;

            for (var i = 0, l = BigImgDiv.length; i < l; i++) {
                CurDiv = BigImgDiv[i];
                if (BigImgDiv[i].children[0].alt === ThisLI) {
                    CurDiv.removeClass('Not_Selected').addClass('Selected');
                } else {
                    CurDiv.removeClass('Selected');
                };
            };
        }
    );

Not sure why im getting this error message, as removeClass() is working fine in other methods.

• javascript
• jquery

• 2 Because it's not a jQuery object, simply do CurDiv = $(BigImgDiv[i]); – Ohgodwhy Commented Apr 30, 2013 at 6:26
• Thank you all, answered pletly evaded me. – DirtyRedz Commented Apr 30, 2013 at 6:42

2 Answers 2

When using a numeric index in a jQuery object you get the original DOM element(s) without the jQuery wrapper.

Just wrap this again in a jQuery function and you'll be fine:

// ...

CurDiv = $( BigImgDiv[i] );

// ...

Another solution as suggested by @Andreas in the ments is to use the eq() method, which is probably the better way:

// ...

CurDiv = BigImgDiv.eq(i);

// ...

Try this: http://jsfiddle/Yx5c8/1/

$('#Small_Pic_Viewer ul li').click(function () {
    var ThisLI = this.firstElementChild.alt;
    $('#Main_Pic_Viewer div').each(function () {
        if (this.children[0].alt === ThisLI) {
            $(this).removeClass('Not_Selected').addClass('Selected');
        } else {
            $(this).removeClass('Selected');
        }
    });
});