Jquery's index()函数返回-1，而不是单击列表项在其父项中的位置

Jquery's index() function returns -1 instead of clicked list items position in his parent

本文关键字：列表 单击 位置 index 返回 函数 Jquery      更新时间：2023-09-26

每次我尝试使用这个，一旦我的列表项被单击，它返回-1。有人能开导我吗?我很感激。/谢谢。这是我一直在做的，需要创建一个带有缩略图的图像滑块。

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;
        });
    });
}

这是一个为幻灯片中的每个图像创建缩略图的函数。下面是我将创建的函数的开始，在点击拇指后转到相应的图像。

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

Alert总是返回-1。我尝试了几种方法。有什么问题吗?

既然有人要求一些html，这里是唯一重要的事情:

<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>

goToSlide函数中的this是全局作用域，window。您可以使用call:

显式设置执行上下文。
goToSlide.call(this);

或者你可以传递你点击的元素作为参数:

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

总是尝试发布一个最小的版本http://jsfiddle.net/，使它更容易为我们提供帮助。也可以阅读http://dailyjs.com/2012/06/25/this-binding/

试试这个

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($(this));
            return false;
        });
    });
}
function goToSlide(thumbClicked) {
    alert(thumbClicked.parent('ul#thumbs').index());
}

相关文章：