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

这是我开始工作的codepen，但我不能让它在实际网站上工作。这对我来说很奇怪。它给出了一个错误，它不是一个已定义的函数。

TypeError：e.each不是函数

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

Answer 1

重申我的意见：

在每次迭代时重置curTallest将阻止找到最高的元素。循环中的每个元素都将被视为最高元素，因为curTallest每次都会重置为零。
如果divGroup，您只需要重置current.height() > currTallest的高度。目前，无论currTallest是否已更改，您都会在每次迭代时重置高度。
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);

}

Answer 2

cardHeights('.card');应为cardHeights($('.card'));，因为divGroup中的cardHeights(divGroup)应该是jQuery对象

元素的等高

2 个答案:

修改