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');

诀窍是你总是需要使用 $（变量）在 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/

jQuery - 获取行

1 个答案: