jquery - jQueryのEven Height Floated LI

Question

次のようなリストがあります。

<ul id="list">
   <li>lorem</li>
   <li>lorem</li>
   <li class="last">lorem</li>
   <li>lorem</li>
   <li>lorem</li>
   <li class="last">lorem</li>
</ul>

私は 3 の行で左側に浮かせています。jQuery を使用して各行 (3 つの Li) を選択し、その行の最大高さを見つけて、その行の他の行を同じ高さに設定するにはどうすればよいですか?

これは私が今持っているものですが、個々の行としてではなく、全体としてのみ表示されます。

var maxHeight = 0;

$('ul#list li').each(function() {
   maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);

score 4 · Accepted Answer

最初に要素を行に分割してから、各行でロジックを個別に使用します。

var items = $('ul#list li');
var total = items.length;

for(i = 0; i < total; i+=3){
    var row = items.slice(i, Math.min(i + 2, total - 1));
    var maxHeight = 0;
    row.each(function() {
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
    }).height(maxHeight);
}

score 0 · Accepted Answer

コンテナをに設定できる場合はoverflow: hidden、JavaScript を使用せずに、非常padding-bottomに大きなネガと同じ大きさのネガを使用してこれを行うことができますmargin-bottom(下部の視覚的なパディングを維持するには、をにmargin-bottom近づけ0て補正します)。例：

#list {
    overflow: hidden;
}
#list li {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

score -1 · Accepted Answer

このコードがお役に立てば幸いです...

$("#list li:nth-child(3n)").each(function(){
   var maxHeight = Math.max.apply(Math, $(this).children().map(function(){ return $(this).outerHeight(); }).get());
   $(this).children().each(function(){
      $(this).height(maxHeight);
   });
});

score -1 · Accepted Answer

これを試してください：

var getMaxHeight = function ($elms) {
    var maxH = 0;
    $elms.each(function () {
        if ($(this).outerHeight() > maxH) {
            maxH = $(this).outerHeight();
        }
    });
    return maxH;
};

var $li = $('#list li');
$li.height(getMaxHeight($li)); // Put this on load or doc.ready

jquery - jQueryのEven Height Floated LI

4 に答える 4

Related

Reference