如果所有下一个兄弟姐妹都被隐藏，则隐藏一个列表项

Question

I have the following list:

<ul>
  <li class="title">A</li>
  <li class="item" style="display: none">a1</li>
  <li class="item" style="display: none">a2</li>

  <li class="title">B</li>
  <li class="item" style="display: none">b1</li>
  <li class="item">b2</li>
</ul>

I would like to create a JavaScript function which checks if the two list items after A are both set to display: none. If they're both set to display: none, then set their title "A" to display: none as well.

I want the script to do the checking for B as well, but don't hide "B" because not all the siblings after it are set to display: none.

I'm thinkering how to proceed for a few hours now but have no idea. Can you give me some ideas how can I do that, not necessarily code, just ideas. Thanks!

Answer 1

You can loop through all li.title and walk down all the next siblings of each li.title instance that are .item using Element.matches() and store in array.

Then check that array of item siblings for all hidden or not and use that determination what to do with display for current instance of li.title

 const titles = document.querySelectorAll('li.title'); Array.from(titles).forEach(li => { const items = []; let next = li.nextElementSibling; while (next && next.matches('.item')) { items.push(next); next = next.nextElementSibling; } const hide = items.every(n => n.style.display === 'none') if (hide) { li.style.display = 'none'; } else { li.style.removeProperty('display') } }) 

 <ul> <li class="title">A</li><!-- should get hidden--> <li class="item" style="display: none">a1</li> <li class="item" style="display: none">a2</li> <li class="title" style="display: none">B</li><!-- should get shown --> <li class="item" style="display: none">b1</li> <li class="item">b2</li> </ul> 

Answer 2

The answer by @charlietfl is a pretty good one. But in case you have no problem with using jQuery, I find the below code a bit simpler.

You can learn more about nextAll() here .

const titles = $('.title');

titles.each(function() {
    const siblings = $(this).nextAll().slice(0, 2);
    const siblingsWithDisplayNone = siblings.filter(function() {
        return $(this).css('display') == 'none'
    });
    if (siblings.length === siblingsWithDisplayNone.length) {
        $(this).css('display', 'none')
    }
});

See it in action here