Как создать слушатель jQuery для перебора некоторой разметки

Question

Я хочу создать простую всплывающую подсказку для элемента (звездный рейтинг), я хочу, чтобы при каждом запуске отображалась подсказка, и появлялось другое сообщение.

Проблема, с которой я сталкиваюсь, заключается в том, что вывод разметки звезды не дает каждой звезде уникальный идентификатор, поэтому мне приходится перебирать каждую коллекцию звезд и применять слушателя к каждой звезде.

Каждая звезда 1 - 5 будет иметь одно и то же сообщение, например звезда 1 = сообщение 1, звезда 2 = сообщение 2 и т. д.

Если кто-то может помочь, мне нужна помощь, чтобы узнать, как создать слушателя и применить html и сообщение к этой конкретной звезде, я хочу сделать это с помощью jQuery.

Вот вывод разметки

<div class="stars">
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled">
        <a title="">1</a>
    </div>
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled">
        <a title="">2</a>
    </div>
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled">
        <a title="">3</a>
    </div>
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled">
        <a title="">4</a>
    </div>
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled">
        <a title="">5</a>
    </div>

    <input type="hidden" value="5" name="rate_overall" disabled=""/>
</div>

Спасибо

Answer 1

Вы можете использовать селектор jQuery :contains, чтобы получить элемент по его тексту:

$(".ui-stars-star a:contains(1)")
$(".ui-stars-star a:contains(2)")
...so on

Answer 2

Зачем повторяться? У вас есть класс для ваших звезд, поэтому сработает один звонок:

 $('.ui-stars-star')
   .on('mouseenter', function() {
     ...
   })
   .on('mouseleave', function() {
   })

Однако это особенно эффективно, так как он регистрирует обработчик на каждом элементе, который имеет этот класс. Тем не менее, это то, что ваш текущий код будет делать тоже.

Компромисс заключается в использовании делегирования событий с использованием трехпараметрической версии .on:

 $('.ui-stars-star', document, function() { ... });

недостатком здесь является эффективность процессора - делегированная система обработчиков в jQuery будет вызываться для каждого движения мыши на странице.

Answer 3

Вы можете использовать функцию index(). ie.:

$('.ui-stars-star').mouseenter(function() {
    switch ($(this).index()) { ..
}

Answer 4

Вы можете привязать один и тот же обработчик событий к каждому элементу и проверять текст при его выполнении (используя $(this), который отличается для разных элементов):

$(".ui-stars-star").mouseover(function() {
  var text = $(this).find("a").text(); // e.g. "1" or "2"

  // now use `text` to fetch the correct message and show it
});