如果div为空，则隐藏按钮 [英] Hide button if div empty
问题描述
我一直试图隐藏一个按钮，当div为空而没有运气时，为什么div是空的？因为通过后端wordpress我在其中插入一个短代码。
I've been trying to hide a button when a div is empty with no luck, why is the div empty? because via back-end wordpress i'm inserting a shortcode in it.
这是代码：
<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>
这就是它，试图让按钮消失，如果没有其他div内部人员#Content，任何想法？
That's pretty much it, trying to get the button to disappear if there's no other div insider #Content, any ideas?
我只是注意到，也许只是div可能不是空的，看起来它是空的但是我思想充满了空间。
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 class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">
推荐答案
检查文本或 html ：
$(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" />
$(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" />
$(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" />
我们在这里可以有点创意。假设我们在内容中寻找 .video_wrapper div。我们可以简单地查询它，如果找不到，返回的长度将为零，导致输入隐藏。
We can be a little creative here. Let's say we're looking for the .video_wrapper div inside the content. 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" />
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" />
这篇关于如果div为空，则隐藏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
