I am having some issues with apply jQuery code on multiple classes with the same class name on a page. It looks like the code will only work for one of the class but not for more than one class.
As you can see there are two TwoColumnUnit classes on the page but only the first TwoColumnUnit is picking up the jQuery code but not picking up the second TwoColumnUnit class.
How can I fix the code so that, this code will work on multiple classes with the same class name?
$('.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>
2
Answers
querySelector()will only select the first occurrence in.TwoColumnUnit. You should usequerySelectorAll()instead.Also, I will suggest you to avoid mixing JS and jQuery.
Demo:
Because your DOM selectors pick up the same two divs
You want to use jQuery as much as possible or none at all
Note I do not need to test the existence of the divs since the script will ignore them if they are not found
No jQuery