Проблема с индексом jQuery()
Должно быть что-то простое, что мне не хватает. Я пытаюсь получить индекс элемента, но продолжаю получать -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');
});
Ответы
Ответ 1
Я стараюсь избегать использования index()
в jQuery 1.3.2 и предыдущих, поскольку это кажется неинтуитивным для использования. Я просто использую
$(this).prevAll().length
чтобы получить индекс. вызов size()
on prevAll()
просто возвращает значение свойства 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 вы просто сможете вызвать index()
для объекта jQuery, чтобы получить индекс первого элемента в объекте.
Ответ 2
index()
возвращает индекс данного элемента со списком элементов, а не внутри родительского элемента. Чтобы найти индекс щелкнутого изображения, вам нужно найти все изображения, а не родительский образ всех изображений.
Вы хотите что-то вроде этого:
// 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();
I.e., вычислить количество элементов img перед этим элементом. Метод index требует, чтобы вы сначала выбирали родительский элемент, а затем все элементы img внутри. Это немного быстрее.
Ответ 4
Если есть div или раздел, который также содержит img перед этим div, решение
var index = $ (this).prevAll(). length;
не будет работать, так как дает тот же ответ, что и при использовании
$ (Это).index();
Решение, которое отлично работает для любого из этих сценариев
var index = $ (this).parent(). find ("img"). index (this);
Я только что применил эти два метода, чтобы решить мою проблему.