无法将jQuery代码应用于具有相同类名的多个类？

toiithl6 于 12个月前发布在 jQuery

关注(0)|答案(2)|浏览(152)

我有一些问题与应用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';
      });
    }
  });
});

个字符

jquery

来源：https://stackoverflow.com/questions/77604188/not-able-to-apply-jquery-code-on-multiple-classes-that-have-the-same-class-name

2条答案

按热度按时间

yiytaume1#

querySelector()将只选择.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');
        }
    });
});

个字符

赞(0）回复(0）举报 12个月前

bwntbbo32#

因为您的DOM选择器选择相同的两个div
你想尽可能多地使用jQuery或者根本不使用
注意我不需要测试div是否存在，因为如果没有找到它们，脚本将忽略它们

$('.TwoColumnUnit').each(function() {
  const $boxes = $(this).find('.newsLetterDiv > div'); // the divs right under newsLetter
  var maxHeights = $boxes
    .map(function() { // jQuery map
      return +this.offsetHeight; // the DOM property
    })
    .get(); // array
  const maxHeight = Math.max(...maxHeights); // find the tallest
  $boxes.each(function() {
    $(this).css({ "height": `${maxHeight}px` });
  });
});

个字符
没有jQuery

document.querySelectorAll('.TwoColumnUnit').forEach(unit => {
  const boxes = unit.querySelectorAll('.newsLetterDiv > div'); // the divs right under newsLetter
  const maxHeights = [...boxes].map(box => +box.offsetHeight);
  const maxHeight = Math.max(...maxHeights); // find the tallest
  boxes.forEach(box => box.style.height = `${maxHeight}px`);
});

<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>

的字符串

赞(0）回复(0）举报 12个月前

我来回答

无法将jQuery代码应用于具有相同类名的多个类？

2条答案

相关问题

热门标签

最新问答