1

特定のクラスのアイテムごとに、それぞれをループして最も高いものを探し、残りを同じ高さに設定する関数を構築しています。

問題は、単一のクラス名しか使用していないことと、要素の型 (つまり、LI と DIV) に応じてそれぞれを一意に処理する必要があるさまざまな要素の型をキャッチしていることです。

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 がある場合、2 つの異なる最大高さを取得します。

ここでの秘訣は、要素の配列を取得し、その要素の配列のフィルター処理されたサブセットによって最大の高さを取得することです。

まず、配列内の要素の型を特定する必要があります。これを行うには、配列をループしてプロパティ tagname を取得します。tagname が配列にまだ存在しない場合は、要素タイプの配列に追加します。

$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（）を使用しているので、それらはとても近いです。css 属性を編集するときに高さ (outerHeight ではない) を設定しているため、代わりに height() を使用してみてください。

于 2013-03-28T16:47:16.457 に答える