jQuery index() 的问题答案

【问题标题】：Problem with jQuery index()jQuery index() 的问题
【发布时间】：2010-01-02 00:45:02
【问题描述】：

我一定缺少一些简单的东西。我正在尝试获取元素的索引，但一直得到 -1。

HTML：

<div id="rating_boxes">
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
</div>

jQuery:

$("img.ratingbox").hover(function() {
    var index = $(this).parent().index(this);
            // have also tried $("#rating_boxes").index(this);
            // and $("#rating_boxes").index($(this));
            // and $(this).parent().index($(this));
    alert(index);
    $(this).attr('src', '/img/ratingbox-selected.gif');
}, function() {
    $(this).attr('src', '/img/ratingbox.gif');
});

【问题讨论】：

标签： jquery jquery-selectors indexing

【解决方案1】：

我倾向于避免在 jQuery 1.3.2 和之前的版本中使用 index()，因为使用起来感觉不直观。我只是使用

$(this).prevAll().length

获取索引。在prevAll() 上调用size() 只会返回length 属性的值，所以我更喜欢直接使用length 并跳过额外的函数调用。

例如，

$("img.ratingbox").hover(function() {
    var index = $(this).prevAll().length;
    alert(index);
    $(this).attr('src', '/img/ratingbox-selected.gif');
}, function() {
    $(this).attr('src', '/img/ratingbox.gif');
});

在 jQuery 1.4 中，您只需在 jQuery 对象上调用 index() 即可获取对象中第一个元素的索引。

【讨论】：

如果可以的话，我会投票 20 次。 .index() 没有意义。

【解决方案2】：

index() 返回带有元素列表的给定元素的索引，而不是在父元素内。要找到点击图片的索引，你需要找到所有图片，而不是所有图片的parent。

你想要这样的东西：

// Find all the images in our parent, and then find our index with that set of images
var index = $(this).parent().find("img").index(this);

在第二个示例中，您还使用了 id 选择器而不是类选择器。而不是

$("#rating_boxes").index($(this)); // your way - select by ID

你想要

$(".rating_boxes").index(this); // select by class

【讨论】：

【解决方案3】：

如果你想知道评分框的位置，更健壮的方法是使用：

var index = $(this).prevAll('img').size();

即，计算此元素之前的 img 元素的数量。 index 方法要求你先选择父元素，再选择里面的所有img元素。这有点快。

【讨论】：

【解决方案4】：

如果这个div之前有一个div或者section也包含img，解决办法

var index = $(this).prevAll().length;

不会起作用，因为它给出的答案与使用

相同

$(this).index();

适用于任何这些场景的解决方案是

var index = $(this).parent().find("img").index(this);

我刚刚应用了这两种方法来解决我的问题。

【讨论】：