如果所有下一個兄弟姐妹都被隱藏，則隱藏一個列表項

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

看到它在這里行動