Question

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

问题是我只使用单个类名，我正在捕捉不同的元素类型，每个元素类型应根据其元素类型（即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();

小提琴 - ＆GT; 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

这似乎是一种使用多个循环等方式执行此操作的方法。我想看看是否有人有更有效的方法，可能使用memoization或酷的东西。：^）

OR

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

Answer 1

我们将获得一个包含.makeEqualHeight的clasname的所有元素的数组。该数组将具有多种不同的元素类型（即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）。

函数来处理非统一的jquery列表

1 个答案: