How to target nearest class within a container using jquery?

Question

I want to target the nearest class and stop on targeting other class elements if it's the last item to be read on that part. Here is what I am trying to achieve.

The .is-child class will show if the .parent class is clicked and only the nearest class will be shown. I already tried using .next() method but it will only show 1 .is-child element per click

Here is my code:

    jQuery('li.current.parent').click(function(){
         jQuery(this).next('.is-child').css('display', 'block');
    });

I also tried using .nextAll but it will show all of the .is-child element.

    jQuery('li.current.parent').click(function(){
         jQuery('.is-child').nextAll('.is-child').css('display', 'block');
    });

@Utkanos Currently using this code http://codejaw.com/r4wrrxi — leonardeveloper, May 01 '17 at 09:33
What's with the down vote? Is there any part that I didn't explained well? — leonardeveloper, May 01 '17 at 09:37
Downvote due to no attempt shown (initially), and no code in the question. Please add the code to the question. — Mitya, May 01 '17 at 09:39
I already said that I tried using `.next()` and `.closest` method but it will only show one element per click. Will update my question then — leonardeveloper, May 01 '17 at 09:42
The second is almost there `jQuery(this).nextUntil('.parent').css('display', 'block');` — Alon Eitan, May 01 '17 at 09:46
@Utkanos Awesome! Will you please put it on the answer for this question so that I can mark it? — leonardeveloper, May 01 '17 at 09:56
@LeonardDrapeza Is that `jQuery(this).nextUntil('.parent').css('display', 'block');` the answer? — Alon Eitan, May 01 '17 at 09:59

score 1 · Accepted Answer · answered May 01 '17 at 10:05

You need to select the elements using .nextUntil - This will select all the element from $(this) until the specified selector (Not including $(this) AND that element that match to the selector):

$(function() {
  jQuery('li.current.parent').click(function(){
    jQuery(this).nextUntil('.parent').css('background-color', 'red');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="current parent">click here</li>
  <li class="is-child">hi</li>
  <li class="is-child">hi</li>
  <li class="is-child">hi</li>
  <li class="parent">bye</li>
</ul>

How to target nearest class within a container using jquery?

1 Answers1