jquery select unique item

Question

I am having issues with selecting a certain element in my html

When I click on the link with class "event_rsvp", I want to effect the HTML of the span in the next li with the class of "interested-status" I have tried closest, tried going out to the parents, how do I tell one to talk to the other.

<li rel="101590"><span class="rsvp-status">Are You Going? –&nbsp;<a href="javascript:;" class="event_rsvp" rel="attending">RSVP</a></span></li>

<li rel="101590"><span class="interested-status"> <a href="javascript:;" class="event_likeit" rel="likeit"> Like It?</a></span></li>

IMPORTANT It's probably important to mention that this is a loop and I need it to effect only the one clicked.

Answer 1

You can do it by navigating. The link is in a list element and the span you want is in the next child so the sequence is: parent -> next -> child span.

$("a.event_rsvp").click(function() {
  $(this).parent().next().children("span.interested-status").addClass('whatever");
  return false;
});

Answer 2

You are looking at dealing with jQuery's siblings() selector. In this specific case you would want to use next() to retrieve the next matching sibling of the LI.

$('.rsvp_status').click(function() {
    // get the next LI with matching class
    $(this).parents().next('.interested-status');
});

Answer 3

$('a.event_rsvp').click(function() {
  $(this).parents('li:first').next().find('span:first').addClass('interested-status');
  return false;
});

It could be optimised with getting parent LI index and marging next() into find() for one query.