найти класс в одном и том же 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"); 
    }); 
}); 

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

JSFiddle DEMO

находка:

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

ближе:

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

Answer 2

простой и надежный подход, чтобы вернуться к .partyclosest с помощью, а затем вернуться вниз, используя 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(). ... есть также a good article to read here

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

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

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

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