javascript - 如何使用 JavaScript 根据其文本内容显示/隐藏 <li>？

Question

我需要隐藏/显示 <li>基于其文本内容。在下面的示例中，我只想显示包含“内容 1”的列表项并隐藏其余的列表项。我确信有几种方法可以做到这一点。我是否需要将列表转换为数组，然后使用“包含”方法，然后使用条件语句附加样式显示无/显示 block ？

我会在一个页面上有几个无序列表，因此使用包装器 div 的 ID 来定位它们。

 <div id="myDiv">
    <ul class="myList">
        <li>content 1</li>   
        <li>content 2</li>  
        <li>content 3</li>   
        <li>content 4</li>     
     </ul>
   </div>

Answer 1

在您要求 JavaScript 解决方案的主题中，这里有一个。迭代涉及的 li 元素并根据其文本内容设置其 display 样式:

for (let li of document.querySelectorAll("#myDiv li")) {
    li.style.display = li.textContent === "content 1" ? "" : "none";
}

<div id="myDiv">
  <ul class="myList">
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
    <li>content 4</li>
  </ul>
</div>