Onclick JavaScript不能檢查特定的div是否包含HTML

Question

我有兩個分別具有img1和img2 id的div。 我想檢查div是否包含其他HTML元素，這讓我知道HTML不為空，而HTML為空，正如您在代碼中看到的那樣。

當我單擊上傳按鈕時，它會提示我“消息不為空” ，甚至#img1為空。

我的問題，為什么執行條件錯誤？

 $(document).ready(function(e) { $('#upload').on('click',function(){ if($('#img1').html()==''){ $('#img1').addClass('TuyoshiImageUpload_div'); $('#img1 input[name=image]').trigger('click'); }else{ alert('not empty'); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> </div> 

Answer 1

您的頁面上肯定存在某種其他javascript錯誤，導致這種行為。 否則，您現有的代碼段將運行正常，沒有任何問題。 嘗試運行它。

Answer 2

您可以使用:empty選擇用.is()方法。

if($('#img1').is(':empty'))

 $(document).ready(function(e) { $('#upload').on('click', function() { if ($('#img1').is(':empty')) { console.log('empty'); } else { console.log('not empty'); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> 

Answer 3

我想你需要這個

 $(document).ready(function(e) { $('#upload').on('click',function(){ if ($('#img1').is(':empty')){ alert('empty'); $('#img1').addClass('TuyoshiImageUpload_div'); $('#img1 input[name=image]').trigger('click'); }else{ alert('not empty'); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> 

Answer 4

您可以使用.is（）。

if( $('#leftmenu').is(':empty') ) {

或者，您可以僅測試length屬性以查看是否找到了一個：

if( $('#leftmenu:empty').length ) {

您可以使用$ .trim（）刪除空格（如果需要的話）並檢查內容的長度。

if( !$.trim( $('#leftmenu').html() ).length ) {

Answer 5

您可以使用jquery children方法並檢查其length以查找div是否為空

 $(document).ready(function(e) { $('#upload').on('click', function() { //if ($('#img1').html() == '') { if ($('#img1').children().length <= 0) { $('#img1').addClass('TuyoshiImageUpload_div'); $('#img1 input[name=image]').trigger('click'); } else { alert('not empty'); } }) }); 

 .TuyoshiImageUpload_div { width: 30px; height: 40px; border: 1px solid green !important; } div {} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> 

Answer 6

您可以做一些非常簡單的事情（無需使用jQuery）：

var isElementEmpty = document.getElementById("someDivElement").getElementsByTagName('*').length > 0;

那時，isElementEmpty將為true或false。 這不會受到空格的影響。 它僅適用於HTML元素。