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

我有一个滑块，其中一些图像在滑块可以有一个可选的照片信用包含文本或链接在一个popper。我想迭代所有的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>

---

很难完全收集你想要做的事情，但如果我理解正确

$('.popper').each(function () { 

  var photoCredit = $(this).find(".photo-credit p")

    if ( $(photoCredit).is(':empty') ){
      $(this).hide();
    }

});

值得指出的是，CSS4开发人员正在开发一个“has”选择器，但截至2017年7月，还不支持任何浏览器

预计其工作方式如下：

.popper:has(> p:empty) { display: none }

---

我希望这有助于……：）

你的方向是对的。但是，javascript中有几个错误。 你试图用“popper”类来攻击所有的div。然而，与“波普尔”和“照片信用”的div处于同一水平。为什么不把目标对准他们的上级部门呢

试试这个代码。已经测试过了（）

---

您可以检查此代码

        $.each($('.popper'), function (index, popper) {
            var isEmptry = true;
            $.each($(popper).next('.photo-credit').children(), function (index, ptag) {
                if ($.trim($(ptag).html()) != '')
                    isEmptry = false;
            });
            if (isEmptry)
                $(popper).hide();
        });

工作代码

$。每个（$（'.popper'），函数（索引，popper）{
var Isempty=真；
$.each（$（popper）.next（'.photo-credit'）.children（），函数（索引，ptag）{
如果（$.trim（$（ptag.html（））！=“”）
Isempty=假；
});
如果（是空的）
$（popper.hide（）；
});

B线：要去的地方




七月四日：你错过了！


节日将于8月31日到来！



我没能按预期工作，但非常感谢您的帮助。谢谢对不起，我帮不了什么忙。。。如果你用之前发布的HTML和一些CSS创建了一个提琴或代码笔，我当然可以帮你看看……只需在这里发布链接就可以了。非常感谢。
$('.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();
        }
    }); 

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

.popper.hide { display: none; }

        $.each($('.popper'), function (index, popper) {
            var isEmptry = true;
            $.each($(popper).next('.photo-credit').children(), function (index, ptag) {
                if ($.trim($(ptag).html()) != '')
                    isEmptry = false;
            });
            if (isEmptry)
                $(popper).hide();
        });