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

时间:2012-03-28 18:26:19

标签: jquery hide children

如果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>

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

试试这个:

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

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

答案 2 :(得分:0)

尝试this

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

});

答案 3 :(得分:0)

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

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