Question

我有一个滑块，滑块中的某些图像可以在popper中包含可选的包含文本或链接的照片。我想迭代所有popper实例，如果.photo-credit p类中的所有p标记都为空，则只隐藏父popper的那个实例。我曾试图将其他帖子的解决方案拼凑起来，但却无法让它发挥作用。如果所有p标签对于该popper都是空的，那么我的代码不会隐藏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中有几个错误。你试图用＆＃34; popper＆＃34;来定位所有的div。类。然而，与＆＃34; popper＆＃34;和＆＃34;照片信用＆＃34;在同一水平上。为什么不改为定位他们的父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();
        }
    });

修改：奖金：如果您的页面有大量的滑块，这个jquery解决方案将导致一些UX问题（＆＃34;跳跃＆＃34; div /页面加载后）

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

渲染DOM元素时。将一个类添加到＆＃34; popper＆＃34; div如果＆＃34; photo-credit＆＃34;的内容是空的。

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

然后在你的CSS中添加

.popper.hide { display: none; }

Answer 2

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

$('.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 }

我希望这有助于......：）

Answer 3

您可以查看此代码。

        $.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();
        });

工作代码

＆＃13;

$.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();
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<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>

＆＃13;

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

3 个答案: