Überprüfen, ob ein div Kindelement hat - Jquery

Question

Ich muss überprüfen, ob ein div ein Kindelement hat und dann CSS hinzufügen (display: none).

Aber mein Code funktioniert weder mit einzelnen noch doppelten Gleichheitszeichen.

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

</div> 

Und meine Codes sind:

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

Answer 1

$(this) nicht .flex-video in Ihrem Code bezieht. Ich würde dieses Element einer Variablen zuweisen und dann einfach auf die Variable im Rest des Codes verweisen.

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

Es arbeitet ist nicht wie erwartet, da this auf das Element bezieht sich nicht, dass Sie auf Ziel versuchen. Standardmäßig bezieht sich this auf das Objekt window, und ohne Ihren vollständigen Code zu sehen, ist dies wahrscheinlich der Fall.

Sie können entweder wieder geben Sie die jQuery-Selektor:

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

... oder speichern Sie die jQuery-Selektor in einer Variablen:

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

jedoch

, ist es erwähnenswert, dass die beiden Schnipsel oben würde nicht funktionieren, wenn es mehrere .flex-video Elemente gibt, weil Sie nur das erste überprüfen. Es wäre besser, über alle .flex-video Elemente zu iterieren, falls es mehr als eins gibt.

Im Snippet wird this das aktuelle .flex-video Element gebunden, weil die .each() Verfahren Kontext iteriert wird für den Wert this bieten:

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

Alternativ können Sie auch den bedingten Scheck machen innerhalb der Kontext des .css()-Verfahrens, weil this an das Element .flex-video gebunden ist. Intern wird jQuery über alle Elemente iterieren, die dem obigen Beispiel .each() ähnlich sind.

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

Answer 3

versuchen

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

Diese iteriert durch jedes Element mit Klasse .flex-Video und weist ele, wenn ele Kinder nicht hat, setzt er Eigenschaft display auf none.

Answer 4

Könnten Sie nicht einfach tun:

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

oder:

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