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

您可以使用Element.matches()遍历所有li.title并遍历li.title的每个.item实例的所有下一个兄弟姐妹，并存储在数组中。

然后检查所有是否隐藏的项目同级数组，并使用该确定如何处理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（）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')
    }
});

查看实际情况here

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

2 个答案: