如果 class 不存在，请忽略
[英]If class doesn't exist do this else ignore
问题描述
Hi what I'm trying to do in Javascript is to find if a class '.promo' exists in the '.productDetails' div, if it does then no action needs to be taken, but if it doesn't exist then i want it to print the copy in the span tags.
嗨，我在 Javascript 中尝试做的是查找 class '.promo' 是否存在于 '.productDetails' div 中，如果存在，则无需采取任何措施，但如果它不存在，那么我想要它在跨度标签中打印副本。 I know this can be done in jQuery but looking to do this in plain Javascript instead.我知道这可以在 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>
2 个解决方案
解决方案1
3 已采纳 2021-04-01 12:43:09
First of all, case matters in JS ( classlist != classList ), should be camel case classList .首先，JS 中的 case 很重要（ classlist != classList ），应该是驼峰classList 。 ALso, the htmlString ( "<span class="promo">Add Promo Banner</span>" ) is not properly formatted.此外， htmlString ( "<span class="promo">Add Promo Banner</span>" ) 的格式不正确。
You can check the length by getting element with querySelectorAll() :您可以通过使用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>
解决方案2
0 2021-04-01 13:13:11
As far as the JS, the issue in your code is just the syntax.就 JS 而言，您的代码中的问题只是语法。 The member is called该成员被称为
<HTML element>.classList
You're just missing the capitalized L.您只是缺少大写的 L。
elem.classList will not return ".classNameA.classNameB" , but rather the actual string value of the class attribute, like this: "classNameA classNameB" elem.classList不会返回".classNameA.classNameB" ，而是返回 class 属性的实际字符串值，如下所示： "classNameA classNameB"
But still, I do not believe that your code will behave properly if you make these changes, because you are searching an element for a class that it does not inherit from.但是，如果您进行这些更改，我仍然认为您的代码不会正常运行，因为您正在搜索一个元素以查找它不继承的 class。 The element that inherits from "promo" is a child element of the element you have a reference to.从"promo"继承的元素是您引用的元素的子元素。
The element you are looking for in your particular code is found in the elem.children array, which is iterable.您在特定代码中查找的元素位于可迭代的elem.children数组中。
Are you trying to search all children of all elements on the page to find heirs of .classList containing "promo" ?您是否正在尝试搜索页面上所有元素的所有子元素以查找包含"promo"的.classList的继承人？ If so, you should check out tree traversal algorithms.如果是这样，您应该检查树遍历算法。 The more obvious implementations of this are that you would start at some root and navigate down via depth-first or breadth-first searching.更明显的实现是，您将从某个根目录开始并通过深度优先或广度优先搜索向下导航。 The DOM is really just a giant tree of elements. DOM 实际上只是一个巨大的元素树。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.