jquery - Как установить высоту для каждого набора дочерних элементов div в каждом контейнере div?

У меня есть несколько контейнеров (class="sidebox") с дочерними элементами div, каждый из которых содержит разное количество контента.

В некоторых случаях я хочу, чтобы каждый дочерний div был на 100% выше родительского div, иногда для добавления стиля вертикального разделителя.

Для этого я добавляю класс cfull к дочерним элементам div и vcon к контейнеру с классом sidebox.

Затем вызовите функцию jquery:

var y = $('.cfull').parent('div.vcon').height();
    $(".cfull").height(y) ;

Это идеально, когда есть только один экземпляр, и высота дочернего элемента div устанавливается равной высоте бокового окна.

Если я добавлю второй sidebox vcon в html и дам одному из его дочерних элементов дополнительный контент. Вторые дочерние элементы бокового поля получают высоту, установленную из первого экземпляра бокового поля.

Как установить высоту для каждого набора дочерних элементов div в контейнере div class="sidebox vcon"?

Я надеюсь, что в этом есть смысл.

Вот мой рабочий пример, вы увидите, что дочерние элементы второго бокового поля имеют style="height:#px" из первого бокового поля.

http://bit.ly/jqueryheightissue


class jquery css parent-child height
person Matt    schedule 07.02.2013    source источник

Ответы (2)


arrow_upward
6
arrow_downward

То, что вы делаете, называется неявной итерацией. Когда вы делаете это:

$('.cfull').height(y);

... что вы делаете, так это устанавливаете для всех элементов .cfull только одно значение высоты (текущее значение y).

Вы хотите перебирать каждый элемент явно, возможно, используя .each().

$('.cfull').each(function () {

    var self = $(this),
        container = self.parent('div.vcon');

    self.height(container.height());

});

Тем не менее, вы должны быть в состоянии сделать то, что вы пытаетесь достичь, используя простой CSS. Вы пробовали делать что-то подобное?

.cfull {
    height : 100%;
}
person Richard Neil Ilagan    schedule 07.02.2013
comment
Большое спасибо, это отлично - person Matt; 07.02.2013

arrow_upward
3
arrow_downward

Вам нужно перебрать все элементы с классом .cfull. Живой пример: http://jsfiddle.net/QpEgX/5/

$('.cfull').each(function() {
    var y = $(this).parent('div.vcon').height();
    $(this).height(y) ;
});
person tw16    schedule 07.02.2013
comment
Хотя я вижу, что @Richard первым получил правильный ответ, я не уверен, почему меня проголосовали за ответ, который отлично работает. - person tw16; 07.02.2013
comment
Возможно, потому что такое же решение уже есть :) Если дело в баллах, я дам вам голос. Что правильно, то правильно, мне все равно, это то же самое :) - person kidwon; 07.02.2013
comment
Возможно, из-за редактирования. Может быть, предыдущее решение, которое вы представили, было неверным? - person Richard Neil Ilagan; 07.02.2013
comment
Возможно, не могу помочь вам с этим. Я не люблю отрицательные голоса, люди должны быть осторожнее с ними - person kidwon; 07.02.2013
comment
... вернувшись назад, я понял, что это я проголосовал против. Извини друг. Я помню, что более ранняя версия была неверной. Позвольте мне посмотреть, смогу ли я исправить это теперь, когда это исправлено. - person Richard Neil Ilagan; 07.02.2013