jquery - Как да задам височините за всеки набор от дъщерни div във всеки контейнер div?

Имам няколко контейнера (class="sidebox") с дъщерни div, всеки с различно количество съдържание.

В някои случаи искам дъщерните divs да бъдат на 100% височина от родителския div, понякога да добавя стил на вертикален разделител.

За да направя това, добавям клас cfull към дъщерните divs и vcon към контейнера с класа 'sidebox'.

След това извикайте jquery функция:

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

Това е идеално, когато има само един екземпляр и задава височината на неговия div на децата на височината на страничната кутия.

Ако добавя втори sidebox vcon в html и дам на един от неговите дъщерни divs допълнително съдържание. Вторият sidebox дъщерни divs получава зададената височина от първия екземпляр на sidebox

Как да задам височините за всеки набор от дъщерни div в class="sidebox vcon" контейнер div?

Надявам се, че има смисъл.

Ето моят работен пример досега, ще видите, че второто дъщерно поле има 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