回调到$ .each（）的回调？ [英] A Callback to $.each()'s Callback?

问题描述

更新：下面的代码确实能按预期工作，并完成我想要的代码。我的困惑是在理解我在我的标记在编写代码下面 - 在给我的标记第二次看，我意识到我的代码工作完美。

提供了我的答案以下对所有有兴趣的人更全面的解释。

---

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

  / * Fixing Module Heights * / 
 $（div.module-box {
 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：75pxclass =module-body> Hello World< / div> 
< div style =height：10pxclass =module-body> Hello World< / div> 
< / div> 
< div class =module-box> 
< div style =height：50pxclass =module-body> Hello World< / div> 
< div style =height：13pxclass =module-body> Hello World< / div> 
< / div> 
  

进入：

 < div class =module-box> 
< div style =height：75pxclass =module-body> Hello World< / div> 
< div style =height：75pxclass =module-body> Hello World< / div> 
< / div> 
< div class =module-box> 
< div style =height：50pxclass =module-body> Hello World< / div> 
< div style =height：50pxclass =module-body> Hello World< / div> 
< / div> 
  

解决方案

此处提供的代码与此处提供的标记完美配合。问题是我的本地标记;它与此处提供的标记不完全相同，试图简化标记：

 < div class =模块行> 
< 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> 
  

请注意，在我的示例中，每个模块框中只有一个。因此，.each（）将模块体的高度设置为开头的任何值。

我想做的是测试每个模块体在每个模块行。我修改的代码看起来像这样：

  $（div.module-row $ b 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。

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

Update: The code below does indeed work as expected, and accomplishes the code I wanted. My confusion was in understanding what I had in my markup when writing the code below - after giving my markup a second look, I realized my code worked perfectly.

I've provided my answer below for all who are interested in the more thorough explanation.

---

I'm trying to delay an action until after a $.each() cycle has completed, but cannot seem to get it working. More specifically, I'm cycling through a series of DIV's to determine the tallest, and then setting the height of all to that value, but I have to wait until I have that highest value before I can set the height of the others:

/* 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);
});

It should turn this:

<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>

Into this:

<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>

解决方案

There is no problem here. The code provided here works perfectly with the markup provided here. The issue was with my local-markup; it wasn't exactly the same as the markup provided here in an attempt to simplify the markup:

<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>

Note here in my example there is only one .module-body within each module-box. For this reason, the .each() was setting the module-body's height to whatever it was to begin with.

What I intened to do was test each module-body within every module-row. My altered code looks like this:

$("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);
});

The only difference is the first selector. It used to be "div.module-box" and is now "div.module-row".

Thank you to everybody here who helped me discover my issue.

这篇关于回调到$ .each（）的回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！