在页面上使用相同类名的多个类上应用jQuery代码时,我遇到了一些问题.看起来代码只适用于其中一个类,但不适用于多个类.

如您所见,页面上有两个TwoColumnUnit类,但只有前TwoColumnUnit个类 Select 了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.&nbsp;</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.&nbsp;</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.&nbsp;</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.&nbsp;</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

推荐答案

querySelector()将仅 Select .TwoColumnUnit中的第一个匹配项.你应该用querySelectorAll()来代替.

另外,我建议您避免将js和jQuery混为一谈.

Demo:

$('.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.&nbsp;</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.&nbsp;</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.&nbsp;</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.&nbsp;</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript相关问答推荐

使用JavaScript/PHP将二维码保存为服务器端的图像

我可以在useState中调用函数并使用其数据吗

订阅操作顺序

IOS(React Native)中未找到模块SquareReaderSDK

想要检测字符串中的所有单词

用户单击仅在JavaScript中传递一次以及其他行为

RxJS setTimeout操作符等效

角色 map 集/spritebook动画,用户输入不停止在键上相位器3

如何修复我的js构建表每当我添加一个额外的列作为它的第一列?

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

用JS从平面文件构建树形 struct 的JSON

当输入字段无效时,我的应用程序不会返回错误

400 bad request error posting through node-fetch

如何在Bootstrap中减少网格系统中单个div的宽度

OpenAI转录API错误请求

Vaadin定制组件-保持对javascrip变量的访问

删除加载页面时不存在的元素(JavaScript)

更新Redux存储中的对象数组

ngOnChanges仅在第二次调用时才触发

使用CEPRESS截取时,cy.Wait()在等待5000ms的第一个路由请求时超时