Question

Every time i try to use this once my list item is clicked, it returns -1.
Can someone enlighten me? I’d appreciate it :/ Thank you. Here is what i’ve been doing, need to create an image slider with thumbnails.

function create_thumbs() {
    imagesUl.children('li').each(function() {
        $('<li class="thumbs"><img src="images/thumb.png" alt="thumb"/></li>').addClass('thumb').hide().appendTo('ul#thumbs').fadeIn(300)
        .click(function() {
            goToSlide();
            return false;
        });
    });
}

That is a function to creat thumbnails for each image i have in the slideshow. Below is the start of the function i will create to go to the corresponding image after the thumb is clicked.

function goToSlide() {
    var thumbClicked = $(this);
    alert(thumbClicked.parent('ul#thumbs').index());
}

Alert always returns -1. I tried couple of ways. What could be the problem ?

Since someone asked for some html, here it is, the only thing important to the issue :

<div id="slider">
                    <ul id="images">
                        <li><img src="images/slideshow/1.jpg" alt="1" title="1"/></li>
                        <li><img src="images/slideshow/2.jpg" alt="2" title="2"/></li>
                        <li><img src="images/slideshow/3.jpg" alt="3" title="3"/></li>
                    </ul>
                    <ul id="thumbs">

                    </ul>
                </div>

Answer 1

this in the goToSlide function is the global scope, window. You can set the execution context explicitly using call:

goToSlide.call(this);

Alternatively you can pass the element you clicked on as an argument:

goToSlide(this);
....
function goToSlide(thumbClicked){
    alert(thumbClicked.parent('ul#thumbs').index());
}