如何使用 JS 将单独的 CSS 样式应用于循环中的 div?

Question

我有两个div，每个div包含两个嵌套的div。如果其中一个嵌套div 的高度比另一个高，我希望应用某些 CSS 样式。

我已经设法让警报正常工作，但是我有点困惑，因为 CSS 样式似乎适用于两个div。

任何帮助完成这项工作将不胜感激。

这是演示 https://jsfiddle.net/Lhn5uxeq/3/

.HTML

<div class="slideshow" data-id="1">
<div class="slideshow-info">
<h1>
Header
</h1>
<p>
Text
</p>
</div>
<div class="slideshow-image">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
</div>
<div class="slideshow" data-id="2">
<div class="slideshow-info">
<h1>
Header
</h1>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</p>
</div>
<div class="slideshow-image">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
</div>

.JS

$(document).ready(function(){
calculateHeight();
$(window).resize(function() {
calculateHeight();
});
});
function calculateHeight() {
$('.slideshow').each(function() {
$('.slideshow-info', this).each(function() {
slideInfoHeight = $(this).height();  
});
$('.slideshow-image', this).each(function() {
slideImageHeight = $(this).height();  
});
if(slideInfoHeight > slideImageHeight) {
alert('info is taller than image');
$('.slideshow-info').css('background-color', 'red');
} else {
alert ('info is shorter than image');
$('.slideshow-info').css('background-color', 'blue');
}
});
}

Answer 1

您必须仅在该特定幻灯片中为div 应用 css。 下面的代码将起作用。 https://jsfiddle.net/Lhn5uxeq/5/

function calculateHeight() {
$('.slideshow').each(function() {
$('.slideshow-info', this).each(function() {
slideInfoHeight = $(this).height();  
});
$('.slideshow-image', this).each(function() {
slideImageHeight = $(this).height();  
});
if(slideInfoHeight > slideImageHeight) {
alert('info is taller than image');
$( this ).find( '.slideshow-info' ).css('background-color', 'red');
} else {
alert ('info is shorter than image');
$( this ).find( '.slideshow-info' ).css('background-color', 'blue');
}
});

Answer 2

您必须指定.slideshow-info是 this 的子项。你这样做$('.slideshow-info', this)

$(document).ready(function() {
calculateHeight();
$(window).resize(function() {
calculateHeight();
});
});
function calculateHeight() {
$('.slideshow').each(function() {
$('.slideshow-info', this).each(function() {
slideInfoHeight = $(this).height();
});
$('.slideshow-image', this).each(function() {
slideImageHeight = $(this).height();
});
if (slideInfoHeight > slideImageHeight) {
alert('info is taller than image');
$('.slideshow-info', this).css('background-color', 'red');
} else {
alert('info is shorter than image');
$('.slideshow-info', this).css('background-color', 'blue');
}
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow" data-id="1">
<div class="slideshow-info">
<h1>
Header
</h1>
<p>
Text
</p>
</div>
<div class="slideshow-image">
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</div>
</div>
<div class="slideshow" data-id="1">
<div class="slideshow-info">
<h1>
Header
</h1>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text.
</p>
</div>
<div class="slideshow-image">
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</div>
</div>