jQuery равные высоты

Question

Я пытаюсь установить высоту на h3 на основе самой высокой версии ее братьев и сестер. Этот бит не слишком сложный. Но то, что мне нужно сделать, это создать его только некоторыми братьями и сестрами.

У меня есть список, который CSS помещает в строку из 3. Последний li на каждой строке имеет класс 'endRow'. Мне кажется, что мне нужно найти «endRow», затем использовать каждый() и вернуться к двум элементам и проверить высоту h3. Кто-нибудь знает простой (иш) способ сделать это?

Ta

Update вот образец разметки. Это не равна высоте для каждого h3, только в каждой строке

<ul> 
<li> 
    <a href="#"><img src="images/x.jpg" alt=""></a> 

    <h3><a href="#">Item 1</a></h3> 

    <div class="productOptions"> 
     <p>Info</p> 

     <p>More info</p> 

     <p>Even more info</p> 
    </div> 
</li> 
<li> 
    <a href="#"><img src="images/x.jpg" alt=""></a> 

    <h3><a href="#">Item 2</a></h3> 

    <div class="productOptions"> 
     <p>Info</p> 

     <p>More info</p> 

     <p>Even more info</p> 
    </div> 
</li> 
<li class="endrow"> 
    <a href="#"><img src="images/x.jpg" alt=""></a> 

    <h3><a href="#">Item 3</a></h3> 

    <div class="productOptions"> 
     <p>Info</p> 

     <p>More info</p> 

     <p>Even more info</p> 
    </div> 
</li> 
<li> 
    <a href="#"><img src="images/x.jpg" alt=""></a> 

    <h3><a href="#">Item 1</a></h3> 

    <div class="productOptions"> 
     <p>Info</p> 

     <p>More info</p> 

     <p>Even more info</p> 
    </div> 
</li> 
<li> 
    <a href="#"><img src="images/x.jpg" alt=""></a> 

    <h3><a href="#">Item 1</a></h3> 

    <div class="productOptions"> 
     <p>Info</p> 

     <p>More info</p> 

     <p>Even more info</p> 
    </div> 
</li> 
<li class="endrow"> 
    <a href="#"><img src="images/x.jpg" alt=""></a> 

    <h3><a href="#">Item 1</a></h3> 

    <div class="productOptions"> 
     <p>Info</p> 

     <p>More info</p> 

     <p>Even more info</p> 
    </div> 
</li> 

Answer 1

Вы можете получить высоту элемента следующим образом:

var height = element.offsetHeight; 

Answer 2

здесь JQuery плагин

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

Это было бы хорошо для сложной простой проблемы.

Answer 3

Без какого-либо примера разметки немного сложно выполнить то, что вы хотите точно. Сначала я думал, что ты что-то вроде:

<h3> 
<li> 
<li> 
<li class="endRow"> 
<h3> 
<li> 
... 

и вам нужно, чтобы посмотреть на высоте каждого <li> и установить предшествующую <h3> к самым высоким. Для этого я использовал бы prevUntil что-то вроде:

var h=0; 
$('.endRow').each(function(){ 
    $(this).prevUntil($('h3')).each(function(){ 
     if ($(this).attr('offsetHeight')>h) { 
      h = $(this).attr('offsetHeight'); 
     } 
     if ($(this).prev().nodeName == 'H3') { 
      $(this).prev().css('height',h); 
      h=0; 
     } 
    }) 
}); 

Обратите внимание, что это просто псевдо, и это полностью зависит от вашей разметки.

Тогда я думал, что, может быть, вы имели в виду у вас было несколько столбцов, которые выглядели как:

<h3> 
<li>     <li>     <li> 
<li>     <li>     <li> 
<li class="endRow"> <li class="endRow"> <li class="endRow"> 

Если это так, то я хотел бы использовать в nth child selector и некоторый код, который выглядит следующим образом:

var h=0; 
$('h3 ul').each(function(){ 
    var first = $(this + "li:nth-child(0)").attr('offsetHeight'); 
    var second = $(this + "li:nth-child(1)").attr('offsetHeight'); 
    var third = $(this + "li:nth-child(2)").attr('offsetHeight'); 
    // do whatever your doing with the heights here 
    h=first; 
    // if im really awake, this refers to ul, so the prev will be the h3 
    $(this).prev().css('height',h); 
    }); 

Answer 4

документация JQuery для .map() имеет демо (последний) с этой функцией, которая работает хорошо:

$.fn.equalizeHeights = function(){ 
return this.height(Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get())) 
} 

Answer 5

Вы можете попробовать следующую функцию, которую я написал некоторое время назад, должны работать нормально.

Пропустить элемент контейнера, он ищет элемент элемента, который вы указываете, и получает наибольшее значение высоты, задает высоту элемента контейнера. И/Или вы также можете установить Внутренние элементы.

Использование:

setHeightMax('ul', 'li', 20,true,'li'); 

Функция:

function setHeightMax(divContainer, lookFor, extraPadding,setInnerContainerHeights, innerContainer) { 
    $(function() { 
     var tempHeight = 0; 
     var containerIDHeight = 0; 
     $.each($(divContainer).find(lookFor), function (key, value) { 
      tempHeight = $(value).height() + extraPadding; 
      if (tempHeight >= containerIDHeight) { 
       containerIDHeight = tempHeight; 
      } 
     }); 
     $(divContainer).css('height', containerIDHeight + 'px'); 

     if (setInnerContainerHeights) 
      $(divContainer).find(innerContainer).css('height', containerIDHeight + 'px'); 
    }); 
} 

Answer 6

Попробуйте использовать этот сценарий, если вы хотите, равного использование высоты класса "AjaxHeight" или изменить AjaxHeight к классу

function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
    thisHeight = $(this).height(); 
    if(thisHeight > tallest) { 
    tallest = thisHeight; 
    } 
    }); 

    group.height(tallest); 

    } 
    $(document).ready(function() { 
    equalHeight($(".AjaxHeight")); 
    }); 

Answer 7

Вы можете использовать этот метод jQuery, чтобы сделать любой элемент равным по высоте с любым согласованным селектором.

Создать метод:

$(document).ready(function(){ 
    jQuery.fn.equalHeights = function(){ 
    var colSelector = this.selector; 
    var newHeight; 
    var colHeights = []; 
    $(colSelector).each(function(){ 
     var singleCol = $(this).outerHeight(); 
     colHeights.push(singleCol); 
     newHeight = Math.max.apply(Math,colHeights); 
    }); 
    $(colSelector).css('height', newHeight+'px'); 
    } 
}); 

Использование:

$('ul li h3').equalHeights();