Question

我有以下代码检查我的div是否有类＆＃34;错误＆＃34;如果是这样，它会显示jQuery UI对话框。但是，我想扩展代码，以便它检查这些div，如果有任何空，它不应该显示对话框。

我环顾四周，有些人建议使用儿童（）。长度＆gt; 0来完成这个，但我不知道如何用我的代码写这个。

JS：

$("#run").click(function() {
  if ($("[id^='Drop']").hasClass("wrong")) {
    $("#dialog1").dialog("open");
  }
});

Answer 1

以下选择器可用于测试元素是否为空：

:empty匹配没有孩子的元素（因此，空）⁺
:parent匹配具有子⁺

现在，重述你的陈述：

...以便检查那些错误的div和if ~~有任何空的~~它们都应该是满的 ~~not~~ 显示对话框。

你会写：

var $allWrong = $("id[^='Drop'].wrong"),
    $notEmpty = $wrong.filter(":parent");
if ($allWrong.length && $allWrong === $notEmpty) {
    // show dialog
}

^{⁺计算儿童时计算文本节点。 <span> </span>包含一个包含空格的文本节点。因此，它与:parent匹配且与:empty不匹配。}

Answer 2

逻辑由两部分组成：

查找id属性的元素，该属性以"Drop"开头且具有.wrong类。
检查这些元素是否为空。

为此，我在执行最终条件之前保存中间变量的第一步：

var $wrongFields = $('[id^="Drop"].wrong');

if ($wrongFields.length && !$wrongFields.filter(':empty').length) {
    // at least one field exists with:
    // - id starting with "Drop"
    // - class of "wrong"
    // and none of those fields are empty
    $("#dialog1").dialog("open");
}

Demo

Answer 3

这也可行

$("#run").click(function(){
    if ($("[id^='Drop']").hasClass("wrong") && $("[id^='Drop'].wrong:empty").length ) {
        $( "#dialog1" ).dialog( "open" );
    }
});

检查div是否有孩子

3 个答案: