Question

我需要检查div是否有子元素，然后添加CSS（display: none）。

但我的代码既不是单字符也不是双字符。

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

</div>

我的代码是：

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

Answer 1

$(this)在您的代码中没有引用.flex-video。我会将该元素分配给变量，然后在代码的其余部分引用该变量。

＆＃13;

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

＆＃13;

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

＆＃13;

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

但是，值得指出的是，如果有多个.flex-video元素，则上面的两个片段不会起作用，因为您只检查第一个元素。如果存在多个.flex-video元素，最好迭代所有this个元素。

在下面的代码段中，.flex-video绑定到正在迭代的当前.each()元素，因为this方法为$(".flex-video").each(function () { if ($(this).children().length === 0) { $(this).css('display', 'none'); } });值提供了上下文：

.css()

或者，您也可以在this方法的上下文中进行条件检查，因为.flex-video将绑定到.each()元素。在内部，jQuery将迭代所有类似于上面$(".flex-video").css('display', function() { return $(this).children().length === 0 ? 'none': ''; });方法示例的元素。

eval exec '"/usr/lib/jvm/java-7-openjdk-amd64/jre/bin/java"' '"-Djava.util.logging.config.file=/usr/local/tomcat/conf/logging.properties"' -Djava.util.logging.manager=org.apache.juli.ClassLoaderLogManager '-Dmyprop=abc$354' -Djdk.tls.ephemeralDHKeySize=2048 -Djava.protocol.handler.pkgs=org.apache.catalina.webresources '-Djava.endorsed.dirs="/usr/local/tomcat/endorsed"' -classpath '"/usr/local/tomcat/bin/bootstrap.jar:/usr/local/tomcat/bin/tomcat-juli.jar"' '-Dcatalina.base="/usr/local/tomcat"' '-Dcatalina.home="/usr/local/tomcat"' '-Djava.io.tmpdir="/usr/local/tomcat/temp"' org.apache.catalina.startup.Bootstrap start

Answer 3

尝试

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

使用类.flex-video遍历每个元素并分配给ele，如果ele没有子元素，则将display属性设置为none。

Answer 4

你不能这样做：

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

或：

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

检查div是否有子元素 - Jquery

4 个答案: