1

我正在构建一个函数，对于具有给定类的每个项目，循环遍历它们中的每一个，寻找最高的，然后将其余的设置为相同的高度。

问题是我只使用了一个类名，并且我正在捕获不同的元素类型，每个元素类型都应该根据它们的元素类型进行唯一处理（即 LIs 与 DIVs）

var makeModulesSameHeight = function() {
    var maxHeight,
        $arrAllTargets = $(".makeEqualHeight");
    maxHeight = getMaxHeight($arrAllTargets);
    $arrAllTargets.css("height",maxHeight);
    console.log("max height for every friggin' thing is " + maxHeight);
};

var getMaxHeight = function($arrModules){
    var myHeight,maxHeight = 0;
    $arrModules.each(function(){
        myHeight = $(this).outerHeight();
        maxHeight = (myHeight > maxHeight) ? myHeight : maxHeight;
    });
    return maxHeight;
};


makeModulesSameHeight();

小提琴--> http://jsfiddle.net/scott_in_ct/bpKxQ/

有没有人有根据元素类型进行这项工作的好方法？

我在想一些事情：

// initialize empty list to contain unique tag names
// select jquery master list of all items with same class
// for each item in jquery master list
//     - if this tagName is not in list above, add it

// then

// for each item in tagName list
//     - create new array specific to that tagName 
          (not sure how to do this, actually.  I think I'm getting confused 
           with PHP's associative array.)  
          I guess I can always just remember what ordinal number 
            goes with which item.

// for each item in jquery master list
//     - move this item into its appropriate tag array
// for each tag array
//     - set each item in array to max height using previous implementation

这似乎是一种使用多个循环等的笨拙方法。我正在寻找是否有人有更有效的方法，也许使用记忆或一些很酷的方法。:^)

或者

// for each item in master array
//    -- look to a common parent and set height according to its descendents
//       (somehow)
// profit!
4

1 回答 1

0

我们将得到一个类名为 .makeEqualHeight 的所有元素的数组。该数组将有多种不同的元素类型（即 div、lis 等）。现在我们想找到性能最佳的方法来确定其类型中最高元素的高度。如果有 div 和 li，那么我们要检索两个不同的最大高度。

这里的诀窍是您获取元素数组，并通过该元素数组的过滤子集获取最大高度。

首先，我们必须确定数组中的元素类型。我们通过遍历数组并获取属性标记名来做到这一点。如果数组中不存在标记名，则将其添加到元素类型数组中。

$arrAllTargets.each(function () {
   var p = $(this).prop("tagName"); 
    if(arrElTypes.indexOf(p) < 0) {
         arrElTypes.push(p); 

    }
});

现在我们有了一个元素类型数组，让我们循环遍历该数组。在每次迭代中，我们将按元素类型过滤主元素数组。我们将使用过滤后的列表调用 getMaxHeight 函数。冲洗并重复。

for(i = 0; i < arrElTypes.length; i++) {
    maxHeight = getMaxHeight($arrAllTargets.filter(arrElTypes[i]));
    $arrAllTargets.filter(arrElTypes[i]).css("height",maxHeight);
}

http://jsfiddle.net/bpKxQ/2/

编辑：高度看起来非常相似，LI 元素为 140px，div 元素为 120px。它们是如此接近，因为您使用的是 outerHeight()。尝试改用 height()，因为您在编辑 css 属性时设置了高度（而不是 outerHeight）。

于 2013-03-28T16:47:16.457 回答