如果类不存在，则执行此操作，否则忽略答案

【问题标题】：If class doesn't exist do this else ignore如果类不存在，则执行此操作，否则忽略
【发布时间】：2021-06-28 11:02:08
【问题描述】：

嗨，我在 Javascript 中尝试做的是查找 '.productDetails' div 中是否存在类 '.promo'，如果存在，则不需要采取任何措施，但如果它不存在然后我希望它在跨度标签中打印副本。我知道这可以在 jQuery 中完成，但希望用纯 Javascript 来完成。

var elem = document.querySelector('.product-details');
if(!elem.classlist.contains('.promo')){
   document.querySelector('.title').innerHTML += "<span class="promo">Add Promo Banner</span>";
 }

.product-details {border: 1px black solid; margin: 10px 0}

<div class="product-details">
  <div class="title">Title</div>
  <div class="promo">Promo 20% off</div>
</div>

<div class="product-details">
  <div class="title">Title</div>
</div>

【问题讨论】：

作为documentation for .classlist shows，您必须将实际的类名而不是类选择器传递给.contains()
首先是classList。其次，您的字符串有未转义的引号。第三，不要永远使用.innerHTML +=——改用insertAdjacentHTML。第四，您正在测试.product-details 元素本身是否具有.promo 类；要测试元素是否包含 .promo 子元素，请使用 .querySelector('.promo')。

标签： javascript class if-statement contains

【解决方案1】：

首先，JS中的大小写问题（classlist！= classList），应该是驼峰式大小写classList。另外，htmlString ("<span class="promo">Add Promo Banner</span>") 的格式不正确。

您可以通过querySelectorAll() 获取元素来检查长度：

var elem = document.querySelectorAll('.product-details');
elem.forEach(function(el){
  if(!el.querySelectorAll('.promo').length){
    el.querySelector('.title').innerHTML += "<span class=promo>Add Promo Banner</span>";
  }
});

.product-details {border: 1px black solid; margin: 10px 0}

<div class="product-details">
  <div class="title">Title</div>
  <div class="promo">Promo 20% off</div>
</div>

<div class="product-details">
  <div class="title">Title</div>
</div>

【讨论】：

谢谢你，但是因为那里不存在 .promo 类，所以应该在第二个标题下添加带有“添加促销横幅”副本的 span 标签。
@leek1234，在这种情况下，您必须遍历所有项目并检查每个项目的条件。我已经更新了答案。请检查:)
对不起最后一个问题，如果我想查找 .promo 类是否存在或 .text 类我该怎么做？这个想法是一样的，不要用副本打印跨度标签。
@leek1234，在这种情况下你可以添加另一个条件if(!el.querySelectorAll('.promo').length || !el.querySelectorAll('.text').length){
感谢@Mamun 我已经尝试过了，但它似乎不起作用。跨度标记现在都打印在两者上。

【解决方案2】：

就 JS 而言，您的代码中的问题只是语法。该成员被称为

<HTML element>.classList

您只是缺少大写的 L。

elem.classList 不会返回".classNameA .classNameB"，而是返回类属性的实际字符串值，像这样："classNameA classNameB"

但是，如果您进行这些更改，我仍然不相信您的代码会正常运行，因为您正在为一个元素搜索一个它不继承自的类。从"promo" 继承的元素是您引用的元素的子元素。

您在特定代码中查找的元素位于可迭代的 elem.children 数组中。

您是否尝试搜索页面上所有元素的所有子元素以查找包含"promo" 的.classList 的继承人？如果是这样，您应该检查树遍历算法！更明显的实现是，您将从某个根目录开始并通过深度优先或广度优先搜索向下导航。 DOM 实际上只是一棵巨大的元素树。

【讨论】：