Question

我正在寻找具有相同类名的几个Div标签。循环时，我正在检查每个div标签的高度。如果由于换行而高度超过正常的105px，我需要为那些选择的Div添加一个新类。使用console.log我可以看到每个Div，索引号，高度和文本。但是，当我编写If语句时，它每次都返回true，对于每个具有该类名的div。

一旦“超长文本”上的换行符，边框应该变为蓝色，并且仅在那些选择的Div上。

$('.sub-service-title').each(function(index) {

	var subServiceHeight = $(this).css('height');
	var minHeight = 105;
	console.log( index + ": " + $( this ).text() + $(this).css('height'));

	if ($( subServiceHeight > minHeight )) {
		$(this).addClass('break');
	}

	else {
		$(this).removeClass('break');
	}

});

.sub-service-title {
  min-height: 105px;
  width: 100%;
  border: 1px solid red;
  margin: 10px 0px;
}

.break {
border: 5px solid blue;
}

h1 {
font-size: 50px;
line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-service-title"><h1>Short Text</h1></div>
<div class="sub-service-title"><h1>Super Super Super Super Super Long Text</h1></div>
<div class="sub-service-title"><h1>Short Text</h1></div>
<div class="sub-service-title"><h1>Super Super Super Super Super Long Text</h1></div>
<div class="sub-service-title"><h1>Short Text</h1></div>

Answer 1

您不需要$(...)包裹您的病情。

if (subServiceHeight > minHeight) {

在jQuery中使用

$(...)来查找基于选择器的元素。

您还使用.css('height')返回字符串，然后将其与数字进行比较。看到你正在使用jQuery，你可以使用.height（）来获取元素的高度

var subServiceHeight = $(this).height(); // returns number

Answer 2

更新了完美的代码。

$(document).ready(function() {
	$('.sub-service-title').each(function() {

		var subServiceHeight = $(this).height();
		var minHeight = 105;
		//console.log( index + ": " + $( this ).text() + $(this).height());

		if ( subServiceHeight >= minHeight ) {
			$(this).addClass('break');
		}

		else {
			$(this).removeClass('break');
		}

	});
});


$( window ).on("resize", function() {
	$('.sub-service-title').each(function() {

		var subServiceHeight = $(this).height();
		var minHeight = 105;
		//console.log( index + ": " + $( this ).text() + $(this).height());

		if ( subServiceHeight >= minHeight ) {
			$(this).addClass('break');
		}

		else {
			$(this).removeClass('break');
		}

	});
});

.sub-service-title {
  min-height: 100px;
  width: 100%;
  border: 1px solid red;
  margin: 10px 0px;
}

.break {
border: 5px solid blue;
}

h1 {
font-size: 30px;
line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-service-title"><h1>Short Text</h1></div>
<div class="sub-service-title"><h1>Super Super Super Super Super Long Text</h1></div>
<div class="sub-service-title"><h1>Short Text</h1></div>
<div class="sub-service-title"><h1>Super Super Super Super Super Long Text</h1></div>
<div class="sub-service-title"><h1>Short Text</h1></div>

为什么在通过classname循环div时，我的if语句总是返回true？

2 个答案: