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

【问题标题】：How do I show/hide an <li> based on its text content using JavaScript?如何使用 JavaScript 根据其文本内容显示/隐藏 <li>？
【发布时间】：2021-10-03 12:54:24
【问题描述】：

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

我会在一个页面上有几个无序列表，因此使用包装器 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>

【问题讨论】：

您可能希望使用像 react 或 vue 这样的框架/库，这些用例很常见且易于处理
“内容1”的选择是如何确定的？它是恒定的吗？
见Hide div that contains specific text。
是的，文本内容是不变的。我想学习用 Vanilla JS 做到这一点。
也许不是从文本中隐藏，而是按项目编号隐藏。看看这个库show-more

标签： javascript css

【解决方案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>

【讨论】：

这是一个有趣的速记。我知道发生了什么，但有点困惑这种事情的顺序是否有效。样式语句 = 文本内容，然后是三元等号，然后是条件语句。
运算符有一个优先级：首先相等（===），然后是三进制（? :），然后是赋值（=）。我跳过了成员访问 (.) 运算符，它确实是第一位的。
我将三个等号换成了 .includes。包含是否与三等号具有相同的优先级？我对事情的顺序仍然有些困惑。即使您对优先级的解释 - 是什么决定了这里的事情顺序，因为当我尝试将它与优先级相提并论时似乎不直观。抱歉 - 我是个新手。
使用includes 也可以正常工作。所以顺序（===）是：li.textContent === "content 1"。然后对三元运算符求值，因此如果=== 表达式求值为真，则求值为""，否则求值为"none"。然后该字符串的分配发生，所以我们得到li.style.display = "none"（或""）。
我想让我感到困惑的是代码似乎没有按优先顺序编写。

【解决方案2】：

如果你想实现一个元素的文本，那么你应该使用 TextContent 或 innerHtml。 textContent 更受欢迎因为一些安全问题和最新的语法。
你也可以使用indexOf()方法来检查是否有字符串元素存在与否。这是一个字符串方法。类似的语法因为这个是Node.textContent.indexOf("word") != -1)。
别忘了你有不止一个 li 标签所以你必须检查它们的值带有循环（for）。最好是for let foo of bar。

const li = document.querySelectorAll('li');

document.querySelector('button').addEventListener('click', () => {
  for (let x of li) {
    if (x.textContent === 'content1') {
      x.style.display = 'none';
    } else {
      x.style.display = 'block';
    }
  }
});

<ul>
  <li>content1</li>
  <li>content2</li>
  <li>content3</li>
</ul>

<button type="button">Hide</button>

【讨论】：

【解决方案3】：

我的建议：

[...document.querySelectorAll('.myList li')]
.forEach(li => li.style.display = li.innerText === 'content 1' ? 'block' : '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>

或者：

[...document.querySelectorAll('.myList li')]
.forEach(li => {
  'content 1' !== li.innerText && (li.style.display = '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>

【讨论】：