兄弟の1つが空の場合に要素を非表示にする

Question

div 'name'が空の場合、div 'email'コンテンツを非表示にする必要があります。私はこれをしました：

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

}); 

しかし、これは動作しません。このようなメディア連絡先は複数存在し、すべてが名前でdivで値を埋め込まれるわけではないので、静的テキスト "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

はこれを試してみてください：

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

存在し、不足している他の1名で、このjsFiddle exampleを参照してください。

Answer 2

空の文字列にテキストを（）の比較あやふやですおそらく異なるブラウザーでは異なる動作をするでしょう。 "：empty"をチェックすると、ページのレンダリング方法によっては改行文字付きのテキストノードが残っている可能性があります。

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

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()) !== ''); 
    }); 
});