如果任何Div为空，做某事。

Question

我有以下语句，用于检查id为#Drop的任何Div是否为空，如果其中一个为空，则显示警报。然而，当前当任何div中有内容时，该语句不再起作用。

我想表达的是，如果任何一个div为空，我希望出现警报。总共有4个Div，如果其中任何一个为空，警报消息应该出现，即使例如4个中的3个具有内容，只要有一个空的div，警报就应该触发。

HTML:

 <div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

JS:

$("#run").click(function(){
    if ($("[id^='Drop']").html() === ""){
        alert("empty")// ...
    }
});

- TryingAtCode

Answer 1

使用 jQuery :empty 选择器。详细了解 :empty 选择器。

描述：选择所有没有子元素（包括文本节点）的元素。

查看演示

 $("#run").click(function(){
     if ($("[id^='Drop']:empty").length){
        alert("empty")// ...
     }
 }); 

第二个选项：如我在评论中提到的，以及@A.Wolff在回答评论中提到的，这里添加了第二个选项。 演示

$("#run").click(function(){       
    if ($("[id^='Drop']").is(":empty")){
     alert("empty")// ...
    };
});

- Nishit Maheta

---

我发现你已删除的评论更易读，使用 if ($("[id^='Drop']").is(':empty')){...}。 - A. Wolff

@A.Wolff，我检查了一下，它不会检查多个元素。那么请使用上面回答的选项。 - Nishit Maheta

@A.Wolff 是的，我在我的答案中添加了两个选项。谢谢 :) - Nishit Maheta

Answer 2

$("#run").click(function(){
    if ($("[id^='Drop']").is(":empty")){
        alert("empty")// ...
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="run">click</div>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

- guest271314

Answer 3

你也可以尝试这样做。

$('div').each(function(index){
    if($(this).text() == ''){
        index=parseInt(index+1 ,10)
        alert('The div at '+index+' is empty')
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)">text</div>

- Akshay

Answer 4

试试这个，

for(i=0;i<=4;i++)
{
    if($("div#Drop"+i).length==0)
    {
        alert("DIV with id Drop"+i+"is empty");
        return false;
    }
}

- Tushar Kulkarni