Как заставить jQuery изменять только один div вместо всех div одного и того же класса?

Question

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

Я использую этот код:

$(document).ready(function(){
 $(".notLogged img").mouseover(function(){
  $(this).parent()>$("span").html("You must be logged in to vote.");
 })
})

Я думал, что это будет работать следующим образом: Для всех img элементов внутри «notLogged» div, при наведении курсора будет изменена другая часть этого div.

Однако этого не происходит. Всякий раз, когда запускается это событие при наведении курсора, все деления с классом notLogged изменяются.

Как я могу изменить этот код, чтобы модифицировать только тот div, в котором произошла наведение мыши?

Answer 1

Попробуй так:

$(document).ready(function(){
 $(".notLogged img").mouseover(function(){
  $(this).parent().find("span").html("You must be logged in to vote.");
 });
});

Answer 2

// Assuming the 1st span in the div is the one to be modified.
$(this).parent().$('span:eq(1)').html("You must be logged in to vote.");
// :eq(1) selects the first element that matches its selector.  You could
// also use ':first' in this case.