如果 div 标签不存在，如何显示无？

Question

如果"slick-initialize "div标记在父元素中不存在，那么我希望父元素ID (product recommendation -recipe)不显示任何内容。现在我设置的是:

HTML设置如下:

<div id="product-recommender-recipe">
<div class="slick-initialized">
</div>
</div>

我的JS到目前为止。如果长度为0，则让父ID显示为none。:

var productTemplate = document.getElementsByClassName("#product-recommender-recipe > .slick-initialized")
if (productTemplate.length === 0){
document.getElementById("product-recommender-recipe").style.display = "none";
}

我设置好了吗?

Answer 1

您可以使用CSS隐藏#product-recommender-recipe，并检查.slick-initialized exists是否比显示。

它工作得很好。

#product-recommender-recipe {
padding: 50px;
background-color: red;
display: none;
}
#product-recommender-recipe:has(.slick-initialized) {
display: block;
}

<!-- hidden if slick-initialized not exist -->
<div id="product-recommender-recipe">
<!-- <div class="slick-initialized"></div> -->
</div>
<br/>
<!-- visible if slick-initialized exist -->
<div id="product-recommender-recipe">
<div class="slick-initialized"></div>
</div>

Answer 2

你很接近了。你在执行中犯了两个错误。第一个是，你使用getElementByClassName时，实际上你是使用ID作为你的选择器。因此，您应该使用querySelector。

第二个是你过度使用了你的选择器。您已经选择了父div并将其放置在一个变量中，以便您可以再次引用它。

这是我的实现:

var productTemplate = document.querySelector("#product-recommender-recipe")
if (!productTemplate.querySelector('.slick-initialized')) {
productTemplate.style.display = none;
}

#product-recommender-recipe {
background: red;
width: 50px;
height: 50px;
}

<div id="product-recommender-recipe">
<div class="slick-initialized"></div>
</div>

Answer 3

getElementsByClassName只需要一个类名，而不是一个选择器。如果要使用选择器，请使用querySelector或querySelectorAll。如果该元素在DOM中不存在，则querySelector返回null。

const element = document.querySelector(".slick-initialized");
if(element === null) {
document.querySelector("#product-recommender-recipe").style.display = "none";
}