如果div为空，则隐藏按钮
[英]Hide button if div empty
问题描述
I've been trying to hide a button when a div is empty with no luck, why is the div empty? 
我一直试图在div为空而没有运气时隐藏一个按钮，为什么div为空？ because via back-end wordpress i'm inserting a shortcode in it. 因为我通过后端wordpress在其中插入了一个简码。
this is the code: 这是代码：
<head>
<script src="jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() { if ( $(".whatever").parents("#content").length == 1 ){
$('input#bt23').show();
}else { $('input#bt23').hide();
});
</script>
</head>
<body>
<div id="content">
///empty
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" /></body>
That's pretty much it, trying to get the button to disappear if there's no other div insider #Content, any ideas? 就是这样，如果没有其他div内部人员#Content，有什么想法，尝试使按钮消失。
I just noticed that, maybe just maybe the div is not empty, it looks like it's empty but i think is filled with space. 我只是注意到，也许只是div不为空，看起来好像是空的，但我认为已经充满了空间。
So rather than comparing empty with filled, how would it be to compare filled with text and a specific div inside it? 因此，与其比较空白和填充，不如比较文本和其中的特定div填充？
like this: 像这样：
<div class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">
3 个解决方案
解决方案1
1 已采纳 2015-04-02 22:49:04
Check for text or html : 检查text或html ：
Without content 没有内容
$(document).ready(function() { if ( $("#content").text() ){ $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"></div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With content 有内容
$(document).ready(function() { if ( $("#content").text() ){ $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content">Content here</div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With spaces only 仅带空格
$(document).ready(function() { if ( $("#content").text().trim() ){ $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> </div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div 检查特定的div
We can be a little creative here. 我们在这里可以有点创意。 Let's say we're looking for the .video_wrapper div inside the content. 假设我们正在内容中寻找.video_wrapper div。 We can simply query for it, and if it's not found, the returned length will be zero, causing the input to hide. 我们可以简单地查询它，如果找不到，返回的长度将为零，从而导致输入被隐藏。
$(document).ready(function() { console.log($("#content .video-wrapper")); if ($("#content .video-wrapper").length > 0) { $('input#bt23').show(); } else { $('input#bt23').hide(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> <div class="content"> <div style="whatever"> <div class="video-wrapper"></div> </div> </div> </div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div - plain JS 检查特定的div-纯JS
function windowReady() { if (document.querySelector("#content .video-wrapper")) { document.getElementById('bt23').style.display = "block"; } else { document.getElementById('bt23').style.display = "none"; } }; window.onload = windowReady;
<div id="content"> <div class="content"> <div style="whatever"> <div class="video-wrapper"></div> </div> </div> </div> <input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
解决方案2
0 2015-04-02 22:48:07
You trying to accomplish something like this? 您试图完成这样的事情？
$(document).ready(function() {
if ( $("#content").html() == '' )
{
$('input#bt23').hide();
}
else {
$('input#bt23').show();
}
});
解决方案3
0 2015-04-02 22:48:57
well first of all this should be handled server sided in PHP, you should check there if any contend comes out. 首先，应该使用PHP在服务器端进行处理，您应该检查是否有任何争执。 failing to do that there is a jquery solution. 未能做到这一点，有一个jQuery的解决方案。
if($.trim($("#content").text()) == ""){$("#bt23").hide();}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.