jQuery - 获取行中最高的列

Question

我有一个使用 Bootstrap 的页面。我试图找到每行中最大列的高度。为了做到这一点，我有:

html:

<div class="row">
  <div class="col-md-4">
    <br />
    One
  </div>
  <div class="col-md-4">
    <br />
    <br />
    <br />
    Two
  </div>
  <div class="col-md-4">
    <br />
    Three
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <br />
    One
  </div>
  <div class="col-md-4">
    <br />
    <br />
    Two
  </div>
  <div class="col-md-4">
    <br />
    <br />
    <br />
    Three
  </div>
</div>

javascript:

$(function () {
  var rows = $('.row');
  for (var i = 0; i < rows.length; i++) {
    var maxHeight = 0;

    var cols = null;  // NOT SURE WHAT TO DO TO GET THE COLUMNS HERE
    for (var i2 = 0; i2 < cols.length; i2++) {
      var colHeight = $(cols[i2]).height();     // NOT SURE IF THIS IS CORRECT
      if (colHeight > maxHeight) {
        maxHeight = colHeight;
      }
    }

    alert('Largest Column Height: ' + maxHeight);
  }
});

jsfiddle here

我不确定如何获取给定行中的所有列。那时，我不完全确定如何获得高度。这些都源于同一个问题:我不明白何时使用选择器，何时不使用。

如何获取一行中的所有列及其各自的高度？

Answer 1

要选择您需要使用的列:

var cols = $(rows[i]).children('div');

诀窍是你总是需要用 $(variable) 使 for 中的变量成为 jquery 变量，然后搜索子 div。

完整代码为:

$(function () {
  var rows = $('.row');
  for (var i = 0; i < rows.length; i++) {

    var maxHeight = 0;

    var cols = $(rows[i]).children('div');  // NOT SURE WHAT TO DO TO GET THE COLUMNS HERE
    for (var i2 = 0; i2 < cols.length; i2++) {
      var colHeight = $(cols[i2]).height();     // NOT SURE IF THIS IS CORRECT
      if (colHeight > maxHeight) {
        maxHeight = colHeight;
      }
    }

    alert('Largest Column Height: ' + maxHeight);
  }
});

https://api.jquery.com/children/