Question

如果div'name'为空，我需要隐藏div'email'内容。我这样做了：

$(document).ready(function() {
    $('.media-contact').each(function() { 
        if ($(this).children('.name').text()===''){
         $(this).children('.email').hide();
        }
    }

});

但这不起作用。将会有多个这样的媒体联系人，并不是所有人都会将名称div填充一个值，因此只有静态文本“电子邮件”显示并使其变得丑陋。我想循环浏览每个媒体联系人，检查'name'是否为空，如果是，则隐藏'email'..请帮助..

<div class="media-contact">
        <div class="name">
            Bill Bero
        </div>
        <div class="title">
            Communications and Media Relations Specialist
        </div>
        <div class="email">
            <a class="rc-link" href='mailto:will.kero@canalliance.org'><span><img src="/sites/dev/style%20library/images/design/icons/icon_email.png" alt=""/><em>EMAIL</em></span></a>
        </div>
        <div class="phone">
            <span class="baec5a81-e4d6-4674-97f3-e9220f0136c1" style="white-space: nowrap">
            219-661-3099, ext. 2
            </span>
        </div>
    </div>

Answer 1

将text（）与空字符串进行比较最多只是iffy，并且可能在不同的浏览器中表现不同。检查“：empty”应该更好，虽然取决于页面的呈现方式，可能仍然有一个带有换行符的文本节点或其他东西。

$(document).ready(function() {
    $('.media-contact').each(function() { 
        if ($(this).children('.name').is(":empty")) {
         $(this).children('.email').hide();
        }
    }
});

Answer 2

试试这个：

$('.media-contact').each(function() {
    if ($.trim($(this).children('.name').text()) === '') {
        $(this).children('.email').hide();
    }
});

查看此 jsFiddle example ，其中一个名称存在，另一个名称丢失。

Answer 3

尝试this：

$(document).ready(function() {
    $('.media-contact').each(function() { 
        var $this = $(this);
        if ($this.find(".name").html().trim() == "") {
            $this.find(".email").hide();
        }
    }

});

Answer 4

这是一个想法。使用切换和布尔值。

$(document).ready( function () {
    $('.media-contact').each( function () {
        $(this).find('.email')
            .toggle( $.trim( $(this).find('.name').text() ) !== '' );
    });
});

如果其中一个兄弟姐妹是空的，则隐藏一个元素

4 个答案: