定位元素/ div的下一个实例

Question

I have the following HTML structure and JavaScript file:

.html

<li>
 <button class="show-more"></button>
 some more elements
 <div class="hidden"></div>
</li>

JavaScript

$( ".show-more" ).click(function() {
  event.preventDefault();
  $( this ).next().slideToggle( "fast", function() {
  });
});

I need the click event to toggle the next first instance of .hidden , however the click event is targeting the first element after it and not the next instance of .hidden , any ideas how I can go about it?

Answer 1

nextAll and first :

$(this).nextAll('.hidden').first().slideToggle(...);

This question has more about this: Efficient, concise way to find next matching sibling?

Answer 2

Another possible solution:

$('~.hidden:first', this).slideToggle("fast");

This will match for the first, next sibling of the class .hidden in the context of this . The ~ -selector will reach all following siblings.

Demo

Reference

Next sibling selector

first selector

context of selector