Question

I have the following HTML

<div class="test">Click Me</div>
<div class="something">hello</div>
<div class="yes">yes!</div>
<div class="taco">stackoverflow</div>
<div class="super">Whatever</div>

How would I use jQuery to click on $('div.test') and change the HTML of $('div.super') using a single selector?

I used to think that I would have to do this:

$('div.test').click(function(){
  $(this).next().next().next().next().html("hello world!");
});

But the next() documentation says it can take a selector, like this:

.next([selector])

So I thought maybe I could just do this:

$('div.test').click(function(){
  $(this).next('.super').html("hello world!");
});

But that doesn’t seem to find anything. What am I doing wrong. Am I misunderstanding the usage of the selector in the next() method?

Answer 1

Change .next('.super') to .siblings('.super').

The next method, when given a selector, will match the very next sibling if it matches the selector. It doesn’t find the next sibling matching the selector.

The siblings method will find all siblings that match the selector passed to it.