найти класс в том же DIV с JQuery

Question

Я хочу найти class, соответствующий другому class в том же div.

Структура HTML:

<div class="main">
  <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://img2.jpg"></a>
                <p class="votenums"> 20 votes.</p>
  </div>

   <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://imgtwo2.jpg"></a>
                <p class="votenums"> 30 votes.</p>
  </div>

jQuery-код:

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).find(".votenums").text("changed text");
    });
});

Когда я нажимаю img с классом vote, я хочу отредактировать класс votenums, соответствующий тому же div.Это означает, что при нажатии на изображение желаемое поведение должно измениться.

скрипка здесь: http://jsfiddle.net/85vMX/1/

Answer 1

find выполняет поиск вниз, и .votenums не является потомком .vote, вы должны пройти до div и затем найти потомка .votenums

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).closest('div').find(".votenums").text("changed text");
    });
});

Если нужный вам div всегда имеет class=party, вы можете искать по нему:
$(this).closest('.party').find(".votenums").text("changed text");
Селектор класса лучше, чем селектор элемента

JSFiddle DEMO

найти:

Описание: Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, объектом jQuery или элементом.

Ближайший:

Описание: Получить первый элемент, соответствующий селектору, начиная с текущего элемента и прогрессируя через DOM дерево.

Answer 2

Простой и надежный подход - вернуться к .party, используя closest, а затем вернуться назад, используя find:

$(".vote").live("click", function(e) {
    e.preventDefault();
    $(this).closest('.party').find('.votenums').text("changed text");
});

Это позволяет вам изменить внутреннее расположение .party, не нарушая JQuery.

Answer 3

Если у вас нет веских причин для установки class и ID на элемент img, я бы предложил использовать код более аккуратного html.В конце концов, не имеет смысла применять .preventDefault() к тегу img, так как событие не ожидается, в этом случае для этого используется тег <a> так:

<div class="main">
 <div class="party">
  <a id="1001" class="vote" href="#"><img src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg"></a>
  <p class="votenums"> 20 votes.</p>
 </div>
 <div class="party">
  <a id="1002" class="vote" href="#"><img src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg"></a>
  <p class="votenums"> 30 votes.</p>
 </div>
</div>

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

Тогда лучшим вариантом будет обновление до jQuery v1.7.x (если вы этого еще не сделали) и использование jQuery .on() вместо.live().Вы найдете это на сайте jQuery:

Начиная с jQuery 1.7, метод .live() устарел.Используйте .on() для присоединения обработчиков событий.Пользователи старых версий jQuery должны использовать .delegate() вместо .live(). ... есть также хорошая статья для прочтения здесь

Тогда вы можете использоватьменее дорогая функция, такая как

$(function() {
 $(".vote").on("click", function(e) {
 e.preventDefault();
 $(this).next('.votenums').text("changed text");
 });
});

И, наконец, CSS тоже нужно немного подправить

.vote img{
    height:70px;
    width:70px;   
}