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

toiithl6  于 2024-01-07  发布在  jQuery
关注(0)|答案(2)|浏览(253)

我有一些问题与应用jQuery代码在多个类具有相同的类名在一个页面上.它看起来像代码将只适用于一个类，但不适用于多个类.
正如您所看到的，页面上有两个TwoColumnUnit类，但只有第一个TwoColumnUnit获取jQuery代码，而没有获取第二个TwoColumnUnit类。
我如何修复代码，使这段代码将工作在多个类具有相同的类名？

  1. $('.TwoColumnUnit').each(function() {
  2.   var pairs = [document.querySelector('.TwoColumnUnit_Left'), document.querySelector('.TwoColumnUnit_Right')];
  3.   pairs.forEach(function(pair) {
  4.     if (pair) {
  5.       var boxes = pair.getElementsByClassName('col-sm-12 col-md-6');
  6.       var maxHeight = 0;
  7.       Array.from(boxes).forEach(function(box) {
  8.         box.style.height = ''; // Reset
  9.         maxHeight = Math.max(maxHeight, box.offsetHeight);
  10.       });
  11.       Array.from(boxes).forEach(function(box) {
  12.         box.style.height = maxHeight + 'px';
  13.       });
  14.     }
  15.   });
  16. });

个字符

jquery

2条答案

按热度按时间
yiytaume

yiytaume1#

querySelector()将只选择.TwoColumnUnit中的第一个匹配项。您应该改用querySelectorAll()。
另外，我建议你避免混合使用JS和jQuery。

Demo：

  1. $('.TwoColumnUnit').each(function () {
  2.     var pairs = [$(this).find('.TwoColumnUnit_Left'), $(this).find('.TwoColumnUnit_Right')];
  3.     pairs.forEach(function (pair) {
  4.         if (pair.length > 0) {
  5.             var boxes = pair.find('.col-sm-12.col-md-6');
  6.             var maxHeight = 0;
  7.             boxes.each(function () {
  8.                 $(this).css('height', ''); // Reset
  9.                 maxHeight = Math.max(maxHeight, $(this).height());
  10.             });
  11.             boxes.css('height', maxHeight + 'px');
  12.         }
  13.     });
  14. });

个字符

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
bwntbbo3

bwntbbo32#

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

  1. $('.TwoColumnUnit').each(function() {
  2.   const $boxes = $(this).find('.newsLetterDiv > div'); // the divs right under newsLetter
  3.   var maxHeights = $boxes
  4.     .map(function() { // jQuery map
  5.       return +this.offsetHeight; // the DOM property
  6.     })
  7.     .get(); // array
  8.   const maxHeight = Math.max(...maxHeights); // find the tallest
  9.   $boxes.each(function() {
  10.     $(this).css({ "height": `${maxHeight}px` });
  11.   });
  12. });

个字符
没有jQuery

  1. document.querySelectorAll('.TwoColumnUnit').forEach(unit => {
  2.   const boxes = unit.querySelectorAll('.newsLetterDiv > div'); // the divs right under newsLetter
  3.   const maxHeights = [...boxes].map(box => +box.offsetHeight);
  4.   const maxHeight = Math.max(...maxHeights); // find the tallest
  5.   boxes.forEach(box => box.style.height = `${maxHeight}px`);
  6. });
  1. <div class="TwoColumnUnit">
  2.   <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
  3.     <div class="newsLetterDiv">
  4.       <div class="col-sm-12 col-md-6">
  5.         <div class="left_Side">
  6.           <i class="fas fas fa-route"></i>
  7.           <h3>This is about Tennis</h3>
  8.         </div>
  9.         <div class="right_Side">
  10.           <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>
  11.         </div>
  12.       </div>
  13.     </div>
  14.     <div class="newsLetterDiv">
  15.       <div class="col-sm-12 col-md-6">
  16.         <div class="left_Side">
  17.           <i class="fas fas fa-basketball"></i>
  18.           <h3>This is about Basketball</h3>
  19.         </div>
  20.         <div class="right_Side">
  21.           <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>
  22.         </div>
  23.       </div>
  24.     </div>
  25.   </div>
  26.   <div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
  27.     <div class="newsLetterDiv">
  28.       <div class="col-sm-12 col-md-6">
  29.         <div class="left_Side">
  30.           <i class="fas fas fa-basketball"></i>
  31.           <h3>This is about Basketball</h3>
  32.         </div>
  33.         <div class="right_Side">
  34.           <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>
  35.         </div>
  36.       </div>
  37.     </div>
  38.     <div class="newsLetterDiv">
  39.       <div class="col-sm-12 col-md-6">
  40.         <div class="left_Side">
  41.           <i class="fas fas fa-route"></i>
  42.           <h3>This is about Tennis</h3>
  43.         </div>
  44.         <div class="right_Side">
  45.           <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>
  46.         </div>
  47.       </div>
  48.     </div>
  49.   </div>
  50. </div>
  53. <div class="TwoColumnUnit">
  54.   <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
  55.     <div class="newsLetterDiv">
  56.       <div class="col-sm-12 col-md-6">
  57.         <div class="left_Side">
  58.           <i class="fas fas fa-route"></i>
  59.           <h3>This is about Tennis</h3>
  60.         </div>
  61.         <div class="right_Side">
  62.           <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>
  63.         </div>
  64.       </div>
  65.     </div>
  66.     <div class="newsLetterDiv">
  67.       <div class="col-sm-12 col-md-6">
  68.         <div class="left_Side">
  69.           <i class="fas fas fa-basketball"></i>
  70.           <h3>This is about Basketball</h3>
  71.         </div>
  72.         <div class="right_Side">
  73.           <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>
  74.         </div>
  75.       </div>
  76.     </div>
  77.   </div>
  78.   <div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
  79.     <div class="newsLetterDiv">
  80.       <div class="col-sm-12 col-md-6">
  81.         <div class="left_Side">
  82.           <i class="fas fas fa-basketball"></i>
  83.           <h3>This is about Basketball</h3>
  84.         </div>
  85.         <div class="right_Side">
  86.           <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>
  87.         </div>
  88.       </div>
  89.     </div>
  90.     <div class="newsLetterDiv">
  91.       <div class="col-sm-12 col-md-6">
  92.         <div class="left_Side">
  93.           <i class="fas fas fa-route"></i>
  94.           <h3>This is about Tennis</h3>
  95.         </div>
  96.         <div class="right_Side">
  97.           <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>
  98.         </div>
  99.       </div>
  100.     </div>
  101.   </div>
  102. </div>

的字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com