javascript - 当有多个具有相同类名的父 div 时，如果子 div 类没有内容，则隐藏父 div 类

Question

我有一个 slider ，其中 slider 中的某些图像可以有一个可选的照片信用，其中包含弹出窗口中的文本或链接。我想迭代所有 popper 实例，如果 .photo-credit p 类中的所有 p 标签均为空，则仅隐藏父 popper 的该实例。我试图从其他一些帖子中拼凑出一个解决方案，但未能使其发挥作用。如果该 popper 的所有 p 标签都是空的，我的代码不会隐藏 popper。我是 JavaScript 新手，非常感谢任何帮助。

HTML

<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
    <!--Required List Element-->
    <div class="slider-list">
        <div class="slider-item">
            <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
            <div class="slider-content-container">
                <h1>B LIne: The Place to Be</h1>
                <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
            </div>
            <div class="popper">
                <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
            </div>
            <div class="photo-credit hide">
                <p><p><a href="http://www.someurl.com">A photo credit</a>.</p></p>
                <p></p>
            </div>
        </div><div class="slider-item">
            <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
            <div class="slider-content-container">
                <h1>July 4th: You missed it!</h1>
                <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
            </div>
            <div class="popper">
                <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
            </div>
            <div class="photo-credit hide">
                <p></p>
                <p></p>
            </div>
        </div><div class="slider-item">
            <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
            <div class="slider-content-container">
                <h1>Festival coming Aug. 31st!</h1>
                <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
            </div>
            <div class="popper">
                <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
            </div>
            <div class="photo-credit hide">
                <p></p>
                <p></p>
            </div>
        </div>
    </div>
</div>

<a href="#" class="slider-control-prev"><img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next"><img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>

<p class="slider-pagination"></p>

</div>

JavaScript

     $('.popper').each(function () {
            //var $thisPopper = $(this);
            var hasContent = 0;
            $('.photo-credit p').each(function () {
                if($(this).html().length > 0) {
                  hasContent++;
                }
            });
            if(hasContent > 0){
                //$thisPopper.hide();
                $(this).hide();
            }
        }); 

Answer 1

你的方向是正确的。然而你的 javascript 中有几个错误。 您尝试将所有具有“popper”类的 div 作为目标。然而，带有“popper”和“photo-credit”的 div 处于同一级别。为什么不定位其父级 div 呢？

试试这个代码。已经过测试( Link to jsfiddle )

$('.slider-item').each(function () {
        var thisSilerItem = $(this);
        var hasContent = 0;
        thisSilerItem.find('.photo-credit p').each(function () {
            if($(this).html().length > 0) {
              hasContent++;
            }
        });
        if(hasContent <= 0){
            thisSilerItem.find('.popper').hide();
        }
    }); 

编辑: 奖金: 如果您的页面有大量 slider ，此 jquery 解决方案将导致一些 UX 问题(页面加载时/之后出现“jumpy”div)

尝试仅使用 CSS 的解决方案。

当您渲染 DOM 元素时。如果“photo-credit”的内容为空，则向“popper”div 添加一个类。

<div class="popper hide">
// img
</div>

然后在 CSS 中添加

.popper.hide { display: none; }