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

Question

我有以下清单：

<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>

我想创建一个JavaScript函数，该函数检查A之后的两个列表项是否都设置为显示：无。 如果它们都设置为显示：无，则将其标题“ A”设置为显示：无。

我希望脚本也对B进行检查，但不要隐藏“ B”，因为不是所有在其后的兄弟都设置为显示：无。

我正在考虑如何继续几个小时，但不知道。 您能给我一些想法吗，我不一定要编码，而只是想法。 谢谢！

Answer 1

你可以通过所有循环li.title和走各的所有兄弟姐妹旁边li.title被实例.item使用Element.matches()和存储阵列。

然后检查所有是否隐藏的同级项数组，并使用该决定处理li.title当前实例的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

@charlietfl的答案是一个很好的答案。 但是，如果您使用jQuery没问题，我发现以下代码会更简单。

您可以在此处了解有关nextAll（）的更多信息。

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')
    }
});

看到它在这里行动