javascript - 元素等高

Question

所以我正在做的就是尝试使某一类对象全部相等，但使其足够有用且简单化，以便在各种文档中重新调整用途。

对我来说，一切看起来都是有效和合法的，但有些东西却搞砸了。

function cardHeights(divGroup) {
console.log("This is running");
divGroup.each(function (e) {
    var current = $(this),
        curTallest = 0;

    if (current.height() > curTallest) {
        curTallest = current.height();
        console.log(curTallest);
    }

    divGroup.height(curTallest);
});
}

然后我用它来调用函数来工作。

$(document).ready(function () {
    cardHeights('.card');
    $(window).on('resize', cardHeights('.card')); 
});

这是一个代码笔，我可以让它工作，但我无法让它在实际网站上工作。这对我来说很奇怪。它给出一个错误，它不是一个定义的函数。

类型错误:e.each 不是函数

http://codepen.io/ddavisgraphics/pen/ZYQxqq

Answer 1

重申我的评论:

1. 在每次迭代时重置 curTallest 将阻止找到最高的元素。循环中的每个元素都将被视为最高的，因为 curTallest 每次都会重置为零。

2. 如果 current.height() > currTallest，您只需重置 divGroup 的高度。目前，无论 currTallest 是否已更改，您都会在每次迭代时重置高度。

3. cardHeights() 需要一个 jQuery 对象。你正在向它传递一个字符串。传递 jQuery 对象或将字符串转换为函数内的对象。

话虽这么说，我的建议是收集所有高度，根据这些值确定最大高度，并将所有高度设置为最大高度。这可以防止不必要地多次设置高度。

这是一个例子:

$(function() {
  cardHeights('.card');
  $(window).on('resize', cardHeights('.card'));
});


function cardHeights(divGroup) {

  /* Initialize variables */
  var heights = [],
      $group = $(divGroup);

  /* Iterate through the selected elements, pushing their heights into an array */
  $group.each(function() {
    heights.push($(this).height());
  });

  /* Determine the maximum height in the array */
  var maxHeight = Math.max.apply(Math, heights);

  /* Set the height of all elements in the group to the maximum height */
  $group.height(maxHeight);

}

div.card {
  background-color: #CCC;
  margin: 1em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="card">Test</div>
<div class="card">Test<br />Tester<br />Testing<br />Test-o-rama<br />Tallest!</div>
<div class="card">Test<br />Tester</div>

编辑

如果由于某种原因，您不想使用数组，则可以使用原始方法将每个元素的高度与最大高度进行比较:

function cardHeights(divGroup) {

  /* Initialize variables */
  var $group = $(divGroup),
      maxHeight=0,
      thisHeight=0;

  /* Iterate selected elements, reset maxHeight if the current height is taller */
  $group.each(function() {
    thisHeight=$(this).height();
    if (thisHeight>maxHeight) {maxHeight=thisHeight;}
  });

  /* Set the height of all elements in the group to the maximum height */
  $group.height(maxHeight);

}