jQuery子divが空の場合、親divを非表示にする

Question

私はこれを見回して、これについて多くの質問を見つけましたが、解決策はありません。

<div class="pricetag"> 
    <div class="price">400</div> 
</div> 

<div class="pricetag"> 
    <div class="price"></div> 
</div> 

<div class="pricetag"> 
    <div class="price">250</div> 
</div> 

私がしたいのは、.priceに何も含まれていない.pricetagを隠すことです。 これは、同じページに異なる.pricetagをたくさん作ることができますが、空白の.priceを持つものを非表示にしたいだけです。

これはjQueryで可能ですか？私は別のスクリプトをたくさん試しましたが、どれも正しく動作していませんでした。

Answer 1

あなたは空の.price要素は、任意のテキストノード（例えば改行文字）が含まれていないだろうと仮定し、:emptyセレクタとparent方法を使用することができます。

$(".price:empty").parent().hide(); 

ここworking exampleです。

Answer 2

$('.price').each(function(){ 
    if ($(this).text().length == 0) { 
    $(this).parent().hide() 
    } 
}) 

Answer 3

あなたはdiv要素が空であるかどうかを確認してから、親のdivを非表示にする.is(':empty')を使用することができますhttp://jsfiddle.net/mm4pX/1/

作業のデモ。このことができます

希望、

コード

$('.price').each(function() { 
    if $('.price').is(':empty') $(this).parent().hide() 
});​ 

Answer 4

このjqueryのコードは、それが

$(function(){ 
    $(".price").each(function(){ 
    if($(this).html()=="") 
     $(this).parent(".pricetag").hide(); 
    }); 
}); 

jsbin例でしょう。http://jsbin.com/ovagus

Answer 5

このjQueryのスクリプトを試してみてください

$(document).ready(function(e) 
{ 
    $('div.pricetag').each(function(key, value) 
    { 
     if(!$('div.price', value).html()) $(value).hide(); 
    }); 
}); 

Answer 6

:emptyセレクタは、空白が含まれている要素を選択しません。それが問題であるなら、あなたは空白の要素をトリミングすることができます

function isEmpty(element){ 
    return !$.trim(element.html()) 
} 

$(".box").each(function() { 
    var box = $(this); 
    var body = box.find(".box-body"); 

    if(isEmpty(body)) { 
    console.log("EMPTY"); 
    box.hide(); 
    } 
}); 

http://codepen.io/DanAndreasson/pen/jWpLgM