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

如何解决如果类不存在，请执行此操作，否则忽略

嗨，我在 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>

解决方法

首先，JS中大小写很重要（classlist != classList），应该是camel case 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>

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

<HTML element>.classList

您只是缺少大写的 L。

elem.classList 不会返回 ".classNameA .classNameB"，而是返回类属性的实际字符串值，如下所示："classNameA classNameB"

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

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

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

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

如何解决如果类不存在，请执行此操作，否则忽略

解决方法

相关推荐