问题描述
更新:下面的代码确实能按预期工作,并完成我想要的代码。我的困惑是在理解我在我的标记在编写代码下面 - 在给我的标记第二次看,我意识到我的代码工作完美。
提供了对所有有兴趣的人更全面的解释。
我试图延迟一个动作,直到$ .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()的回调?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!