divに子要素があるかどうかを確認する - Jquery

Question

divに子要素があるかどうかを確認してからCSS（display: none）を追加する必要があります。

しかし、私のコードでは、1文字も2文字も使用できません。

<div class="flex-video mb-30 "> 

</div> 

そして、私のコードは次のとおりです。

if ($(".flex-video").children().length == 0) { 
    $(this).css('display', 'none'); 
} 

Answer 1

$(this)は、あなたのコード内で.flex-videoを指すものではありません。その要素を変数に代入し、残りのコードで変数を参照するだけです。

var $flexVideo = $(".flex-video"); 
 
if ($flexVideo.children().length == 0){ 
 
    $flexVideo.css('display', 'none'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flex-video mb-30 "> 
 
</div>

Answer 2

thisはあなたがターゲットにしようとしている要素を参照していないため、期待どおりに動作していないです。既定では、thisはwindowオブジェクトを指し、完全なコードは表示されませんが、これはおそらく起きていることです。

あなたはjQueryのセレクタを再指定することができ、次のいずれか

if ($(".flex-video").children().length === 0) { 
    $(".flex-video").css('display', 'none'); 
} 

を...または変数でjQueryのセレクタを格納します。

var $flexVideo = $(".flex-video") 
if ($flexVideo.children().length === 0) { 
    $flexVideo.css('display', 'none'); 
} 

しかし、それは2つのスニペットことを指摘する価値があります複数の.flex-video要素がある場合は、最初の要素のみをチェックしているため、上記のコードは機能しません。複数の要素がある場合は、.flex-video要素のすべてを繰り返し処理する方がよいでしょう。以下のスニペットで

は、thisが.each()方法がthis値のコンテキストを提供するため、繰り返し処理されている現在.flex-video要素にバインドされています。また

$(".flex-video").each(function() { 
    if ($(this).children().length === 0) { 
    $(this).css('display', 'none'); 
    } 
}); 

、あなたはまた、内部の条件付きチェックを作ることができますメソッドの文脈は、thisが.flex-video要素にバインドされるためです。内部的には、上記の.each()メソッドの例に似たすべての要素に対してjQueryが反復処理します。

$(".flex-video").css('display', function() { 
    return $(this).children().length === 0 ? 'none': ''; 
}); 

Answer 3

は、クラス.flex-映像で各要素をこの繰り返し処理

$.each($('.flex-video'), function(idx, ele) { 
    if ($(ele).children().length == 0) { 
     $(ele).css({"display": "none"}); 
    } 
}); 

を試してみて、ELEが子供を持っていない場合、それはnoneに表示プロパティを設定し、ELEに割り当てます。

Answer 4

あなたは、単に行うことができませんでした。

$(".flex-video :not(:has(*))").hide(); 

か：

$(".flex-video :empty").hide();