Question

所以我试图为不同容器中的div设置相同的高度。但是我错过了一些东西而无法让它发挥作用。也许你会发现问题？

＆＃13;

var howMany = $('.comparison-table__labels-wrap .equal-row').length;
for (var i=0; i<howMany; i++) {
    var firstBlock = 'equal-row-' + i;
    var firstHeight = $(firstBlock).height();

    var secondBlock = '.equal-row-' + i + '-child';
    var secondHeight = $(secondBlock).height();

    if (firstHeight < secondHeight) {
        $(firstBlock).css("height", secondHeight);
    } else {
        $(secondBlock).css("height", firstHeight);
    }
}

＆＃13;

.row {
  border-color: #232323;
  border-width: 1px;
  border-style: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-1">
    <div class="row equal-row-0">Row 0</div>
    <div class="row equal-row-1">Row 1</div>
    <div class="row equal-row-2">Row 2</div>
    <div class="row equal-row-3">Row 3</div>
    <div class="row equal-row-4">Row 4</div>
    <div class="row equal-row-5">Row 5</div>
    <div class="row equal-row-6">Row 6</div>
</div>
<div class="container-2">
    <div class="row equal-row-0-child">Row 0</div>
    <div class="row equal-row-1-child">Row 1</div>
    <div class="row equal-row-2-child">Row 2</div>
    <div class="row equal-row-3-child">Row 3</div>
    <div class="row equal-row-4-child">Row 4</div>
    <div class="row equal-row-5-child">Row 5</div>
    <div class="row equal-row-6-child">Row 6</div>
</div>

＆＃13;

Answer 1

我认为你需要$('[class^="equal-row"]')来选择你需要的所有div。见：

function setNewHeight() {
  var howMany = $('[class^="equal-row"]').length;
  //console.log(howMany);
  for (var i = 0; i < howMany; i++) {
    var firstBlock = '.equal-row-' + i;
    var firstHeight = $(firstBlock).height();
    //console.log(firstBlock, firstHeight);

    var secondBlock = '.equal-row-' + i + '-child';
    var secondHeight = $(secondBlock).height();
    //console.log(secondBlock, secondHeight);

    if (firstHeight < secondHeight) {
      $(firstBlock).css("height", secondHeight);
    } else {
      $(secondBlock).css("height", firstHeight);
    }
  }
}

setNewHeight();

.container-1 div, .container-2 div{
  border: 1px solid #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="container-1">
    <div class="container-1">
    <div class="equal-row-0">Row 0
        <br> test1
    </div>
    <div class="equal-row-1">Row 1</div>
    <div class="equal-row-2">Row 2</div>
    <div class="equal-row-3">Row 3</div>
    <div class="equal-row-4">Row 4 
        <br>test2
    </div>
    <div class="equal-row-5">Row 5</div>
    <div class="equal-row-6">Row 6</div>
</div>
<div class="container-2">
    <div class="equal-row-0-child">Row 0</div>
    <div class="equal-row-1-child">Row 1</div>
    <div class="equal-row-2-child">Row 2</div>
    <div class="equal-row-3-child">Row 3</div>
    <div class="equal-row-4-child">Row 4</div>
    <div class="equal-row-5-child">Row 5</div>
    <div class="equal-row-6-child">Row 6
        <br>test3
    </div>
</div>

Answer 2

有趣的例子;）

＆＃13;

function equalizeHeights() {
  const firstDivs = document.querySelectorAll(".first div")
  const secondDivs = document.querySelectorAll(".second div")
  const heights = []

  for (let div of firstDivs) {
    heights.push(div.clientHeight)
  }
  for (let i = 0; i < heights.length; i++) {
    secondDivs[i].style.height = heights[i] + "px"
  }
}

equalizeHeights()

function randomlyChangeHeight() {
  const divs = document.querySelectorAll(".first div")
  const randomNum = Math.floor(divs.length * Math.random())
  const randomHeight = Math.floor(50 + 100 * Math.random())
  divs[randomNum].style.height = randomHeight + "px"
}

setInterval(() => {
  randomlyChangeHeight();
}, 500)
setTimeout(
  () =>
  setInterval(equalizeHeights, 250), 250)

＆＃13;

.first div {
  height: 50px;
}

div div {
  transition: height 500ms;
  border: 1px solid goldenrod;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.first,
.second {
  width: 50%;
  float: left;
}

.first div:nth-child(odd),
.second div:nth-child(even) {
  background-color: mediumseagreen;
}

＆＃13;

<div class="first">
  <div>Row</div>
  <div>Row</div>
  <div>Row</div>
  <div>Row</div>
  <div>Row</div>
</div>
<div class="second">
  <div>Row</div>
  <div>Row</div>
  <div>Row</div>
  <div>Row</div>
  <div>Row</div>
</div>

＆＃13;

Answer 3

在元素中使用抽象类更好。您可以在不同的属性中进行数字定义。这将使实施更容易。请参见下面的示例：

$('.equal-row').each(function () {
    var number = $(this).attr('rel');
    var parentHeight = $(this).height();
    $('.equal-row-child[rel='+number+']').height(parentHeight)
});

.container-1 .equal-row[rel="0"] {
  height: 30px;
}

.container-1 .equal-row[rel="1"] {
  height: 45px;
}

.container-1 .equal-row[rel="2"] {
  height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="container-1">
    <div rel="0" class="equal-row">Row 0</div>
    <div rel="1"class="equal-row">Row 1</div>
    <div rel="2" class="equal-row">Row 2</div>
</div>
<div class="container-2">
    <div rel="0" class="equal-row-child">Row 0</div>
    <div rel="1"class="equal-row-child">Row 1</div>
    <div rel="2" class="equal-row-child">Row 2</div>
</div>

如果您有任何问题，请立即告诉我：）

Answer 4

所以这很好用：

    (function(){
        var howManyCols = $('.comparison-table__labels-wrap .equal-row').length;
        for (var i=0; i<howManyCols; i++) {
            var height1 = $('.equal-row-' + i).outerHeight();
            var col1 = $('.equal-row-' + i);

            var height2 = $('.equal-row-' + i + '-child').outerHeight();
            var col2 = $('.equal-row-' + i + '-child');

            if(height1 < height2) {
                $(col1).css("height", height2);
            } else {
                $(col2).css("height", height1);
            }            
        }
    })();

相同的高度divs在不同的容器中

4 个答案: