循环遍历NodeList（由.querySelectorAll（）返回）并有条件地应用类[重复]答案

【问题标题】：Loop through the NodeList (returned by .querySelectorAll()) and apply class conditionally [duplicate]循环遍历NodeList（由.querySelectorAll（）返回）并有条件地应用类[重复]
【发布时间】：2020-10-01 16:27:44
【问题描述】：

我想要实现的是：

如果列表元素的 innerHTML 显示“MAP”（显示地图链接）
如果列表元素的 innerHTML 显示“NoMAP”（隐藏地图链接）

这是我的 CSS 代码：

   <style type="text/css">
        .hideout {
            display: none;
        }
    </style>

这是我的 JavaScript 代码：

<script type="text/javascript">
  var listElements = document.querySelectorAll('.list');
  var mapElement = document.querySelectorAll('.map');

  listElements.forEach(element => {  

    if (element.innerHTML == "NoMap") {  

      mapElement.classList.add('hideout');  

      }
    });

我上面的内容是无效的。我发现添加索引可以使其工作。

      mapElement[0].classList.add('hideout');

如何在这种情况下应用 for 循环？

【问题讨论】：

我已经尝试过 for(var i = 0; i
分发也不起作用。不过谢谢！
以上链接中的forEach() 答案是我怀疑适合您情况的答案。没有理由它不应该工作 - 这与你的情况相同。
使用element.innerHTML 可能不是您想要的，因为HTML 元素的内容通常显示在页面上给用户。使用另一种方法可能会更好，例如使用the html class attribute 和css selectors 根据HTML 类属性而不是标签的innerHTML 选择性地隐藏和显示您的地图
如果 2 个解决方案中的任何一个解决了您的问题，您可以接受它以标记您的问题已回答。

标签： javascript html dom

【解决方案1】：

您可以通过单个查询 (document.querySelectorAll('.list .map')) 获取所有具有类 map 并且是具有类 list 的元素的子元素的 DOM 元素

处理元素文本I would recommend 以使用.textContent 而不是.innerHTML。

所以，你可以这样做：

document.querySelectorAll('.list .map').forEach(e =>
   e.textContent == 'noMap' && e.classList.add('hideout'))

.hideout {display:none;}

<ul class="list">
  <li class="map">Map</li>
  <li class="map">noMap</li>
</ul>
<ul class="list">
  <li class="map">noMap</li>
  <li class="map">Map</li>
</ul>

【讨论】：

谢谢。这肯定有帮助。
@CKnight124 ：那么您可以检查此解决方案是否已接受，以标记您的问题已回答。这将提高您的声誉记录和在您以后可能寻求支持的人眼中的可信度。

【解决方案2】：

另一种选择：

let listElements = document.querySelectorAll('.map');
listElements.forEach(element => {             
   if (element.innerHTML == "noMap") {
     element.classList.add("hideout"); 
  }
  });

或者：

let nodesSnapshot = document.evaluate('//ul[@class="list"]//li[@class="map"][.="noMap"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
{
  nodesSnapshot.snapshotItem(i).classList.add("hideout");}
;

【讨论】：

谢谢你。我已经从这些笔记中记录下来以备将来使用。