如何让jQuery只修改一个div，而不是同一个类的所有div？

Question

Each page of my site has 10 (almost) identical divs, varying only in the text within. When a certain part of a div is clicked, I want a different part of that div to be modified.

I'm using this code:

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

I thought this would work as follows: For all img elements within a "notLogged" classed div, a mouseover would cause a different part of that div to change.

However, that's not what happens. Whenever that mouseover event is triggered, all divs with the "notLogged" class are modified.

How can I modify this code so only the div in which the mouseover originated is modified?

Answer 1

Try it like this:

$(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.