Question

更新：以下代码确实按预期工作，并完成了我想要的代码。我的困惑在于在编写下面的代码时理解我的标记中的内容 - 在给我的标记再看之后，我意识到我的代码工作得很好。

我已经为所有对更彻底的解释感兴趣的人提供了my answer below。

我正在尝试延迟一个操作，直到$ .each（）循环完成后，但似乎无法使其正常工作。更具体地说，我骑自行车通过一系列DIV来确定最高，然后将所有高度设置为该值，但我必须等到我有最高值才能设置其他值的高度： / p>

/* Fixing Module Heights */
$("div.module-box").each(function(){
  maxHeight = 0;
  $("div.module-body", this).each(function(){
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight;
  });
  $("div.module-body", this).css("height", maxHeight);
});

它应该变成这样：

<div class="module-box">
  <div style="height:75px" class="module-body">Hello World</div>
  <div style="height:10px" class="module-body">Hello World</div>
</div>
<div class="module-box">
  <div style="height:50px" class="module-body">Hello World</div>
  <div style="height:13px" class="module-body">Hello World</div>
</div>

进入这个：

<div class="module-box">
  <div style="height:75px" class="module-body">Hello World</div>
  <div style="height:75px" class="module-body">Hello World</div>
</div>
<div class="module-box">
  <div style="height:50px" class="module-body">Hello World</div>
  <div style="height:50px" class="module-body">Hello World</div>
</div>

Answer 1

这里没有问题。此处提供的代码与此处提供的标记完美匹配。问题在于我的本地标记;它与此处提供的标记不完全相同，试图简化标记：

<div class="module-row">
  <div class="module-box">
    <div class="module-body">
      <p>Hello World</p>
    </div>
  </div>
  <div class="module-box">
    <div class="module-body">
      <p>Hello World</p>
    </div>
  </div>
</div>

请注意，在我的示例中，每个模块框中只有一个.module-body。出于这个原因，.each（）将模块体的高度设置为开始时的高度。

我打算做的是测试每个模块行中的每个模块体。我改变的代码如下所示：

$("div.module-row").each(function(){
  maxHeight = 0;
  $("div.module-body", this).each(function(){
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight;
  });
  $("div.module-body", this).css("height", maxHeight);
});

唯一的区别是第一个选择器。它曾经是“div.module-box”，现在是“div.module-row”。

感谢所有帮助我发现问题的人。

Answer 2

试试这个：

var maxHeight = 0, currentHeight=0;
$("div.module-box").each(function(){ 
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight; 
});
$("div.module-body").css("height", maxHeight);

如果你想要与父母相关：

$("div.module-box").each(function(){ 
var maxHeight = 0, currentHeight=0;
    $(this).children("div").each(function(){
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight;
    }).css("height", maxHeight); 
});

Answer 3

试试这个，我明白这里有什么不对，为没有立即得到它而道歉

$("div.module-body").each(function(){
  $("div.module-body", this).css("height", maxHeight);
});

每个块后第一个。对于每个div的盒子，你将每个循环运行两个。一个获得最大高度，另一个设置它。

Answer 4

我在每个循环上添加了索引，并检查何时到达最后一个元素以设置maxHeight：

/* Fixing Module Heights */

$("div.module-box").each(function(){

  maxHeight = 0;

  moduleBodies = $("div.module-body", this);

  moduleBodies.each(function(i){

    currentHeight = $(this).height();

    if (currentHeight > maxHeight) maxHeight = currentHeight;
    if (i == moduleBodies.length -1) $("div.module-body", this).css("height", maxHeight);
  });


});

Answer 5

不知道这是否是问题，但在声明变量时应使用 var 。

/* Fixing Module Heights */
$("div.module-box").each(function(){
    var maxHeight = 0;
    $("div.module-body", this).each(function(){
        var currentHeight = $(this).height();
        if (currentHeight > maxHeight) maxHeight = currentHeight;
    });
    $("div.module-body", this).css("height", maxHeight);
});

回调$ .each（）的回调？

5 个答案: