[英]Onclick JavaScript not check specific is div have HTML in it or not
I have two div with img1
and img2
ids respectively. 我有两个分别具有
img1
和img2
id的div。 I want to check either div contain further HTML
element or not, it is giving me that HTML
is not empty, while it is empty, as you can see it in code. 我想检查div是否包含其他
HTML
元素,这让我知道HTML
不为空,而HTML
为空,正如您在代码中看到的那样。
As i click on the upload button, it alert me with message "not empty" , even #img1
is empty. 当我单击上传按钮时,它会提示我“消息不为空” ,甚至
#img1
为空。
My Question why it is executing wrong condition? 我的问题,为什么执行条件错误?
$(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>
There must be some kind of other javascript error on your page which is causing such behavior. 您的页面上肯定存在某种其他javascript错误,导致这种行为。 Otherwise, your existing code snippet is running perfectly fine without any issue.
否则,您现有的代码段将运行正常,没有任何问题。 Try running it.
尝试运行它。
You can use :empty
selector with .is()
method. 您可以使用
: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" />
I think You Need This 我想你需要这个
$(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" />
You can use .is(). 您可以使用.is()。
if( $('#leftmenu').is(':empty') ) {
Or you could just test the length property to see if one was found: 或者,您可以仅测试length属性以查看是否找到了一个:
if( $('#leftmenu:empty').length ) {
You can use $.trim() to remove whitespace (if that's what you want) and check for the length of the content. 您可以使用$ .trim()删除空格(如果需要的话)并检查内容的长度。
if( !$.trim( $('#leftmenu').html() ).length ) {
You can use jquery children
method and check its length
to find if a div is empty 您可以使用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" />
Something really simple you can do, (without having to use jQuery) is the following: 您可以做一些非常简单的事情(无需使用jQuery):
var isElementEmpty = document.getElementById("someDivElement").getElementsByTagName('*').length > 0;
At that point isElementEmpty will be either true of false. 那时,isElementEmpty将为true或false。 This does not get affected by whitespace.
这不会受到空格的影响。 It only works with HTML elements.
它仅适用于HTML元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.