Как я могу выровнять высоту div в таблице на основе самого высокого div с помощью jQuery? - PullRequest
0 голосов
/ 02 марта 2011

Я создаю страницу, на которой есть таблица с кучей изображений.Каждое изображение обернуто в набор div.Изображения добавляются пользователем, поэтому я не могу контролировать соотношение сторон, но я буду устанавливать максимальную ширину и высоту для загружаемых изображений.

<table class="pl_upload"> 
  <tr class="row1"> 
    <td class="col1"> 
      <div>
        <div class="img-container">
          <a href="#"><img src="img.jpg" width="182"  alt="X" /></a>
        </div>
      </div> 
    </td>
    .......

Я хотел бы рассчитать высотусамого высокого изображения div в таблице, а затем сделайте все изображения div такой же высоты, используя jQuery.

Я сделал страницу jsfiddle для этого здесь:

http://jsfiddle.net/Evolution/27EJB/

Ответы [ 3 ]

2 голосов
/ 02 марта 2011
var max = 0;

$(".pl_upload img").each(function() {
 if($(this).height() > max) {
  max = $(this).height();
 }
});

$(".img-container").height(max);
1 голос
/ 02 марта 2011

Не уверен, что именно вы ищете, однако это должно быть в состоянии получить самое высокое изображение на странице, а затем установить div на странице на эту высоту.

Кроме того, согласно этому ответу , если вы включите функцию в $(window).load(), ее следует вызывать только после загрузки всех изображений.

$(window).load(function() {
    var tallest = 0;
    $("img").each(function() {
        var h = $(this).height();
        if (h > tallest) {
            tallest = h;
        }
    });
    $("div").css("height", tallest);
});

Пример для jsfiddle .

Если это не то, что вам нужно, пожалуйста, уточните свой вопрос.

0 голосов
/ 02 марта 2011

Будет ли что-то подобное тому, что вы ищете:

var Max = 0;
var Images = $(".img-container img");

Images.each(function(k,v){
    $(this).load(function(){
        if(Max < $(this).height())
        {
            Max = $(this).height();
        }

        if(k == Images.length)
        {
            $(".img.container").height(max);
        }
    });
})

Контрольный пример: http://jsfiddle.net/27EJB/1/

Я не говорю, что это работает именно так, как вы хотите, но из вашего описания это то, что я придумал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...