我在将 jQuery 代码应用于页面上具有相同类名的多个类时遇到一些问题。看起来该代码仅适用于其中一个类,但不适用于多个类。
如您所见,页面上有两个
TwoColumnUnit
类,但只有第一个 TwoColumnUnit
获取了 jQuery 代码,但没有获取第二个 TwoColumnUnit
类。
如何修复代码,以便该代码适用于具有相同类名的多个类?
$('.TwoColumnUnit').each(function() {
var pairs = [document.querySelector('.TwoColumnUnit_Left'), document.querySelector('.TwoColumnUnit_Right')];
pairs.forEach(function(pair) {
if (pair) {
var boxes = pair.getElementsByClassName('col-sm-12 col-md-6');
var maxHeight = 0;
Array.from(boxes).forEach(function(box) {
box.style.height = ''; // Reset
maxHeight = Math.max(maxHeight, box.offsetHeight);
});
Array.from(boxes).forEach(function(box) {
box.style.height = maxHeight + 'px';
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="TwoColumnUnit">
<div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
</div>
</div>
<div class="TwoColumnUnit">
<div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
</div>
</div>
querySelector()
只会选择 .TwoColumnUnit
中的第一次出现。您应该使用 querySelectorAll()
来代替。
另外,我建议你避免混合使用 JS 和 jQuery。
演示:
$('.TwoColumnUnit').each(function () {
var pairs = [$(this).find('.TwoColumnUnit_Left'), $(this).find('.TwoColumnUnit_Right')];
pairs.forEach(function (pair) {
if (pair.length > 0) {
var boxes = pair.find('.col-sm-12.col-md-6');
var maxHeight = 0;
boxes.each(function () {
$(this).css('height', ''); // Reset
maxHeight = Math.max(maxHeight, $(this).height());
});
boxes.css('height', maxHeight + 'px');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TwoColumnUnit">
<div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
</div>
</div>
<div class="TwoColumnUnit">
<div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-basketball"></i>
<h3>This is about Basketball</h3>
</div>
<div class="right_Side">
<p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
</div>
</div>
</div>
<div class="newsLetterDiv">
<div class="col-sm-12 col-md-6">
<div class="left_Side">
<i class="fas fas fa-route"></i>
<h3>This is about Tennis</h3>
</div>
<div class="right_Side">
<p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each. </span></p>
</div>
</div>
</div>
</div>
</div>