Select the first element of a class 'x' after a link with jQuery

Question

I've got some code like this:

<p>Lorem ipsum<a href=# class="a">link</a><span class="b">Text</span>More lorem ipsum<a href=# class="a">link</a><span class="b">Text 2</span>

And I'd like to let users click the link and be able to do something with the span (make it flash, hide it, whatever). I'm using jQuery, and this is what I've got so far:

$('.a').click(function() {
    $(this).nextUntil('.a').css('background-color', 'red');
 });

This works as long as I'm diligent about having links before the spans, and no other code in the text. However, I'm not happy with it, and there must be a better way. I've also tried:

$('.a').click(function() {
    $(this).next('.b').css('background-color', 'red');
 });

But that selects all of the spans of class b, so no good.

I'm new and at a loss. I seek wisdom.

Answer 1

$('a.a').click(function() {
    $(this).next('span.b').css('background-color', 'red');
 });

should work fine for you. It gets the immediately following sibling.

Answer 2

Perhaps you could try this?

$(".a").click(function() {
    $(this).addClass("something_special");
    $(".something_special + .b").css({backgroundColor: "red"});
    $(this).removeClass("something_special");
});