Wenn eine Div leer ist, etwas tun

Question

Ich habe die folgende Aussage, die überprüft, ob einer der Divs mit ID #Drop leer sind, wenn einer leer ist, zeigt es eine Warnung. Wenn jedoch ein div Inhalt enthält, funktioniert die Anweisung nicht mehr.

Ich denke, was ich versuche zu sagen ist, dass ich es will, damit eine Warnung auftaucht, wenn irgendein Div leer ist. Es gibt 4 Divs insgesamt und wenn einer von ihnen leer ist, sollte die Warnmeldung erscheinen, es ist egal, ob zum Beispiel 3 der 4 Inhalt haben, dass der Alarm ausgelöst werden soll, wenn es ein leeres Div gibt.

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

Verwendung jQuery :empty Selektor. Lesen Sie mehr über :empty Selektor.

Beschreibung: Wählen Sie alle Elemente aus, die keine Kinder haben (einschließlich Text Knoten).

Scheck DEMO

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

Zweite Option: als ich habe Erwähnung in meinem Kommentar und @A. Wolff Erwähnung in Antwort Kommentar hier hinzufügen i zweite Option

DEMO

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

Answer 2

die Sie interessieren,

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

Answer 3

Sie können auch so etwas wie dies versuchen

$('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>

Answer 4

$("#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>