检查div是否有孩子

Question

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

我环顾四周，有些人建议使用children（）。length> 0来完成这个，但我不知道如何用我的代码写这个。

JS：

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

Answer 1

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

• :empty匹配没有子元素的元素（因此，为空） ⁺
• :parent匹配具有子项^+的元素

现在，重述你的陈述：

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

你会写：

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

---

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

Answer 2

逻辑由两部分组成：

1. 查找id属性以"Drop"开头且具有.wrong类的.wrong 。
2. 检查这些元素中的任何一个是否为空。

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

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

演示

Answer 3

这也行得通

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