if any Div is empty do something

Question

I have the below statement that checks to see if any of the Divs with id #Drop are empty, if one is empty it shows an alert. however currently when any div has content inside it the statement no longer works.

I guess what I'm trying to say is that i want it so an alert shows up if ANY div is empty. There are 4 Divs in total and if any one of them is empty the alert message should appear, it doesn't matter if for example 3 of the 4 have content the alert should trigger whenever there is an empty 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")// ...
    }
});

Answer 1

use jQuery :empty selector . read more about :empty selector.

Description: Select all elements that have no children (including text nodes).

check DEMO

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

Second option : as i have mention in my comment and @A. Wolff mention in answer comment here i add second option

DEMO

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