jquery - jQuery 索引() 的问题

Question

我一定缺少一些简单的东西。我试图获取元素的索引，但一直得到 -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');
});

Answer 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() 即可获取对象中第一个元素的索引。