javascript - return and scope for jquery each() function within an each() function

Question

I'm have markup like this:

<div class="imagegroup">
    <img>
    <img>
    <img>
</div>
<div class="imagegroup">
    <img>
    <img>
    <img>
</div>
<div class="imagegroup">
    <img>
    <img>
    <img>
</div>​

And I want to separately get the height of the tallest image in each group. I've got a jquery each function within an each function:

$('.imagegroup').each(function(index) {
    var tallestHeight = 0;
    var slideshowNumber = index; 
    var slides = $(this).children();

    $(slides).each(function(index) {
        thisSlideHeight = $(this).height();
        console.log("In slideshow #" + slideshowNumber + ", slide #" + index + " has height " + thisSlideHeight);
        if (thisSlideHeight > tallestHeight) {
            var tallestHeight = thisSlideHeight;
        }
        return tallestHeight;
    });

    console.log("For slideshow " + slideshowNumber + " the tallest slide is " + tallestHeight);

});

But I'm puzzled as to how to pass the result of the inner each function "one level" up into the "outer" each function without just setting a global variable. tallestHeight stays at zero as I've written this. I realize this is super beginner :) All help very appreciated.

http://jsfiddle.net/m2aJu/

Answer 1

你不需要return tallestHeight，删除它，它会工作。

并更改var tallestHeight = thisSlideHeight;为tallestHeight = thisSlideHeight;每个内部的第二个，您应该使用外部变量，而不是声明一个新变量。

或者您可以简化您的代码，如下所示：

$('.imagegroup').each(function(index) {
    var max = Math.max.apply(null, $(this).find('img').map(function() {
       return $(this).height();
    }));        
    console.log("For slideshow " + index + " the tallest slide is " + max);
});

这是工作演示。