循环浏览NodeList(由.querySelectorAll()返回)并有条件地应用类[重复]。

Question

这个问题在这里已经有了答案:

如何正确迭代getElementsByClassName？ (5个答案)

封闭 11天前.

我想实现的是这样的。

• 如果list元素的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循环？

Answer 1

你可以抓取所有有类的DOM元素。map 儿女同堂 list 通过一个查询 (document.querySelectorAll('.list .map'))

要处理元素文本 我会推荐 使用 .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>

Answer 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");}
;