Wordpress 中的 jQuery - 如果父 div 包含特定的其他 div，则隐藏父 div

Question

如果没有幻灯片，我试图隐藏光滑的滑块部分。我尝试了很多不同的选项，比如尝试使用 PHP 和 CSS，但我觉得我最接近让它与 jQuery 一起使用。

HTML 输出结构是：

<div class="container-flex type-testimonials-container">
    <div class="container">
        <div class="container type-testimonials slick-initialized slick-slider">
            <div class="slick-list draggable">
                <div class="slick-track">
                
                    <div class="slick-slide">
                        SINGLE SLIDE CONTENT
                    </div>
                    
                    <div class="slick-slide">
                        SINGLE SLIDE CONTENT
                    </div>
                    
                    <div class="slick-slide">
                        SINGLE SLIDE CONTENT
                    </div>
                
                </div>
            </div>
        </div>
    </div>
</div>

所以，我想如果单个幻灯片 div (.slick-slide) 不存在，我可以使用 jQuery 隐藏包含的 div (.type-testimonials-container)。

我已经尝试过以下操作：

if(jQuery(".slick-slide").html().length)
{
jQuery(".type-testimonials-container").hide();
}

以及许多变体...我认为这可能是因为两个 div 不在同一级别，并且一个包含另一个，但试图找到一种父/子方式事实证明很困难...我不知道该走哪条路...

任何帮助将不胜感激！

编辑*

我也尝试过检查父子关系并尝试等待 DOM 加载，就像这样：

document.addEventListener("DOMContentLoaded", function(event) {

    var parentDiv = document.getElementsByClassName("slick-track");
    var childDiv = document.getElementsByClassName("slick-slide");
    
    if (parentDiv.contains(childDiv)) 
    {
      alert("div DOES exist");
    }
    else{
      alert("div DOES NOT exist");
    }

});

但这只是向我显示了不存在警报，即使它确实存在 - 这会在整个 DOM 中搜索它吗？或者我是否需要提供 div 从 body 或其他东西的确切路径？

Answer 1

为什么不直接查询 .slick-slide 的 HTML 集合的长度？如果目标元素不存在，JQ 仍然会返回一个对象，并且该对象将具有属性 length。像这样的东西

if(jQuery(".slick-slide").length === 0) {
  jQuery(".type-testimonials-container").hide();
}

Answer 2

我设法这样做：

jQuery(document).ready(function() {

    if(jQuery('.slick-slide').length){
        jQuery('.type-testimonials-container').show();
    }

    else
    {
    jQuery('.type-testimonials-container').hide();
    }

});