Question

如何知道div是否不可见？我尝试了不同的方法，但是在所有情况下，如果有一个CSS为display: none的div，它就会将其视为“已满”。我可以检查“是否不显示或为空”。但是有什么方法可以发现所有情况吗？

	// Different ways to say that a div is empty:
	//var empty = $("#a").html() == "";
	//var empty = $("#a").text() == "";
	//var empty = $('#a').text().length == 0
	//var empty = $('#a').contents().length == 0;
	//var empty = $('#a').is(':empty');
	
	// if there is a div display none, it's considered full:
	if ( empty ) {
		$("#check").text("a is empty");
	}
	else {
		$("#check").text("a is full");
	}

#a { display: none; }

<div id='a'>
	<div>something</div>
</div>	

<div id='check'></div>

Answer 1

如前所述，元素是否为“空”取决于您认为是空的，因此您可能必须修剪空格等以在不同的浏览器中获得所需的内容。为了在您的empty定义中包含display: none个元素，您可以使用jquery .css()检查一个元素的计算显示样式：

var display = $('#a').css('display');

if (display === 'none') {
  // do something
}

我不知道您可以用来捕获一个元素是否为“空”的一个衬里。下面是一个相对简单的框架，用于评估元素是否为“空”，但是您可能需要添加其他条件（即可见性，是否认为空白为空等）。

const elems = $('.foo');

elems.each(function() {
  let content = $(this).html().length;
  let display = $(this).css('display');
  if (content && display !== 'none') {
    console.log(this.id, 'displayed and not empty');
  } else {
    console.log(this.id, 'empty or not displayed');
  }
});

<div class="foo" id="bar" style="display: none;">
  <div>
    Something
  </div>
</div>
<div class="foo" id="baz"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

一种解决方案可能是检查div是否具有子元素（您已经做过），以及检查该元素是否实际可见：

var elems = $('#a').contents();
var empty = elems.length == 0;
var containsVisibleElement = false;
elems.each(function(i, v) { //loop though all contained elemetns
  containsVisibleElement = $(this).is(':visible'); //check if element is visible
  if (containsVisibleElement ) {
    return false; //break out of loop as one visible is enough for our check
  }
});

if (empty || !containsVisibleElement) {
  $("#check").text("a is empty");
} else {
  $("#check").text("a is full");
}

#a div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a'>
  <div>something</div>
</div>

<div id='check'></div>

检测是否显示div-差异与空div？

2 个答案: