CODEWITHSUNDEEP
jquery
Abel D
Abel D

Reputation: 1080

jQuery - Select series of items unless it has a class

I want to select series of list items unless it has a class. I want to then hide and show.

<ul>
  <li class="parent">Parent</li>
  <li>item</li>
  <li>item</li>
  <li class="parent">Parent</li>
  <li>item</li>
  <li>item</li>
  <li class="parent">Parent</li>
  <li>item</li>
  <li>item</li>
</ul>

jQuery

$('li').not('.parent').hide();
$('li.parent').on('click', function(){
    //select every next siblings unless it finds a classname
});

So when parent is clicked i want to show the next two lists.

I know this would be easy with nested lists. But I am do this over a plugin generated code. This is how its structured.

There's my code.

Upvotes: 2

Views: 45

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

$('li').not('.parent').hide();
$('li.parent').on('click', function(){
    $('li').not('.parent').not($(this).nextUntil('li.parent')).hide();
    $(this).nextUntil('li.parent').slideToggle();
});

Working DEMO

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241078

You could use the .nextUntil() method in order to select the li siblings until the next .parent:

Example Here

$('li.parent').on('click', function(){
    $(this).nextUntil('.parent').show();
});

Upvotes: 4

Related Questions