jquery 如何找到每对两个div之间的最高高度,并将该最高高度应用于两个div?

9w11ddsr  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(112)

例如,我有以下HTML:

<div class="TwoColumnUnit">
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <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-12">
                <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-12">
                <div class="left_Side">
                    <i class="fas fas fa-Football"></i>
                    <h3>This is about Football</h3>
                </div>
                <div class="right_Side">
                    <p><span>Association football, more commonly known as football or soccer, is a team sport played between two teams of 11 players each, who primarily use their feet to propel a ball around a rectangular field called a pitch.</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-Swimming"></i>
                    <h3>This is about Swimming</h3>
                </div>
                <div class="right_Side">
                    <p><span>Swimming is an individual or team racing sport that requires the use of one's entire body to move through water. </span></p>
                </div>
            </div>
        </div>
    </div>
</div>

字符串
下面是HTML的外观

的图片。
我想找到TennisFootball之间的最高高度,然后将该最高高度设置为TennisFootball的高度。
同样,我想找到BasketballSwimming之间的最高高度,然后将该最高高度设置为BasketballSwimming的高度。
我知道如何使用Math.max找到最大高度。但如何找到每对两个div之间的最高高度?
我所尝试的:

('.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('.newsLetterDiv > div');
          var maxHeight = 0;
          boxes.each(function() {
              $(this).css('height', '');
              maxHeight = Math.max(maxHeight, $(this).height());
          });
          boxes.css('height', maxHeight + 'px');
      }
  });
});


这段代码的问题是,它在所有4个div之间找到最高的高度,然后将最高的高度值作为所有4个项目的高度。
但是我怎样才能找到第一个左格和右格之间的最高高度,然后在第二个左格和右格之间?

ntjbwcob

ntjbwcob1#

这有点冗长,我相信有一个更好的方法比打破它像这样,但如果我理解你的问题正确,这是做这个比较的漫长的道路:

$(document).ready(function() {          
    var tennisHeight = $("#tennis").height()
    var basketballHeight = $("#basketball").height()
    var swimmingHeight = $("#swimming").height()
    var footballHeight = $("#football").height()
    var left = 0
    var right = 0

    if (tennisHeight > basketballHeight) {
        $("#basketball").height(tennisHeight)           
        left = tennisHeight
    }else {
        $("#tennis").height(basketballHeight)           
        left = basketballHeight
    }

    if (footballHeight > swimming) {
        $("#swimming").height(footballHeight)           
        right = footballHeight
    }else {
        $("#football").height(swimmingHeight)           
        right = swimmingHeight
    }

    var winner = Math.max(left, right)
    console.log(winner)

});

字符串
然后你必须采取赢家更新。

相关问题