使用 if 语句检查 div 是否为空

如果一个单独的 div 为空，我将尝试删除一个特定的 div:

$(document).ready(function () {
if ('#leftmenu:empty') {
$('#menuTitleWrapper').remove();
$('#middlemenu').css({ 'right': '0', 'position': 'absolute' });
$('#PageContent').css({ 'top': '30px', 'position': 'relative' });
}
});

我认为这是接近的，但我不能指出如何编写代码来测试 # left menu 是空的。感谢你们的帮助！

234313 次浏览
小开

你可以使用 .is()。

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

或者您可以只测试 length属性，看看是否找到了。

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

请记住，空荡荡的也意味着没有空白。如果有可能出现空白，那么您可以使用 $.trim()并检查内容的长度。

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

试试这个:

$(document).ready(function() {
if ($('#leftmenu').html() === "") {
$('#menuTitleWrapper').remove();
$('#middlemenu').css({'right' : '0', 'position' : 'absolute'});
$('#PageContent').css({'top' : '30px', 'position' : 'relative'});
}
});

虽然不是最漂亮的，但应该能行。它检查 innerHTML (# left menu 的内容)是否为空字符串(即其中没有内容)。

小开

这取决于你所说的“空”是什么意思。

检查是否没有文本(这允许子元素本身为空) :

if ($('#leftmenu').text() == '')

检查是否没有子元素或文本:

if ($('#leftmenu').contents().length == 0)

Or,

if ($('#leftmenu').html() == '')
小开 
if (typeof($('#container .prateleira')[0]) === 'undefined') {
$('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none');
}
小开

在我的例子中，我有多个元素要隐藏在 document.ready 中。这是迄今为止我使用过的函数(filter) :

$('[name="_invisibleIfEmpty"]').filter(function () {
return $.trim($(this).html()).length == 0;
}).hide();

或者移除()而不是隐藏() ，随你喜欢。

仅供参考: 特别是，这是我用来隐藏 SharePoint 中恼人的空表单元格的解决方案(此外还有这个条件“ | | $(This)”)。儿童(「菜单」)。长度”。

小开

如果你想要一个快速演示如何检查空 div，我建议你试试这个链接:

Http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/

下面是一些简短的例子:

使用 CSS

如果你的 div 是空的，甚至没有空格，你可以使用 CSS:

.someDiv:empty {
display: none;
}

不幸的是，没有 CSS 选择器来选择前一个兄弟元素。只有下一个兄弟元素: x ~ y

.someDiv:empty ~ .anotherDiv {
display: none;
}

Using jQuery

使用 text ()函数检查元素的文本长度

if ( $('#leftmenu').text().length == 0 ) {
// length of text is 0
}

检查元素中是否有子标记

if ( $('#leftmenu').children().length == 0 ) {
// div has no other tags inside it
}

Check for empty elements if they have white-space

if ( $.trim( $('.someDiv').text() ).length == 0 ) {
// white-space trimmed, div is empty
}
小开 
if($('#leftmenu').val() == "") {
// statement
}
小开

您可以扩展 < a href = “ https://jQuery.com/”rel = “ norefrer”> jQuery 这样的功能:

延伸:

(function($){
jQuery.fn.checkEmpty = function() {
return !$.trim(this.html()).length;
};
}(jQuery));

Use :

<div id="selector"></div>


if($("#selector").checkEmpty()){
console.log("Empty");
}else{
console.log("Not Empty");
}
小开

我今天遇到了这个问题，但是接受的答案对我来说不起作用。以下是我是怎么做到的。

if( $('#div-id *').length === 0 ) {
// your code here...
}

我的解决方案检查 div 中是否有任何元素，所以如果 div 中只有文本，它仍然会将 div 标记为空。

小开

你也可以这样做:


if (! $('#leftmenu').children().length > 0 ) {
// do something : e.x : remove a specific div
}

我觉得你会喜欢的！


提交答案