Хорошо, у меня уникальная ситуация, сначала я создаю 10 <li> с использованием jQuery append(). Затем я настраиваю высоту каждого <li> на высоту окна / 10, чтобы в целом они заполняли всю высоту экрана. Мой HTML содержит только <div class="wrapper"></div>. Вот мой JS:

// Create The Tree:

$('.wrapper').append('<ul>');
for (var x = 1; x <= 10; x++)
{
    $('.wrapper > ul').append('<li>Root Option ' + x + '</li>');
}

// Script The Tree:

var $winHeight = document.documentElement.clientHeight;
console.log($winHeight);
var $liNumber = $('.wrapper > ul > li').size();
var $liHeight = $winHeight / $liNumber;
$('.wrapper > ul > li').css('height', $liHeight);

var $win = $(window)
$win.on('resize', update);
function update () {
    console.log(document.documentElement.clientHeight);
}

Моя проблема в том, что если вы просматриваете консоль, вы видите, что она не обновляет точно высоту окна. Когда вы изменяете размер окна, оно не регистрирует значения ниже тех, что были при последнем обновлении страницы!

0
dezman 26 Янв 2013 в 02:55

3 ответа

Лучший ответ

Вы имеете в виду это? http://jsfiddle.net/reKSm/2/

var n = 20

$(document).ready(function (){
    $('.wrapper').append('<ul>');
    for (var x = 1; x <= n; x++)
        $('.wrapper > ul').append('<li>Root Option ' + x + '</li>');

    update_size();

    $(window).resize(function(){
    update_size();
    }); 
});

function update_size(){
    // Script The Tree:
    var $winHeight = $(window).height();
    var $liNumber = $('.wrapper > ul > li').length;
    var $liHeight = $winHeight / n;
    $('.wrapper > ul > li').css('height', $liHeight + 'px');    
};

Кроме того, необходимо указать тип документа . Поместите <!doctype html> в начале вашего HTML-файла, и он будет работать.

А также не помещайте верхний код JS в другую функцию $ (document) .ready (). У него уже есть один :)

1
Smuuf 25 Янв 2013 в 23:53

Я не вижу PX в вашем коде, поэтому я думаю:

var $liNumber = $('.wrapper > ul > li').length;  // jquery.size() is deprecated (1.8)
var $liHeight = $winHeight / $liNumber;
$('.wrapper > ul > li').css('height', $liHeight + 'px');

Чтобы выполнить обновление при изменении размера окна, вы должны вызвать функцию обновления ... при изменении размера и фактически заставить эту функцию сделать что-то вместо console.log ():

var n = 20

$(document).ready(function (){
    // Update when window resized
    $(window).on('resize', update);
    // Add <ul> & <li>
    $('.wrapper').append('<ul>');
    for (var x = 1; x <= n; x++)
        $('.wrapper > ul').append('<li>Root Option ' + x + '</li>');
    // Update once
    update();
});

function update () {
    var $winHeight = document.documentElement.clientHeight;
    var $liNumber = $('.wrapper > ul > li').length;
    var $liHeight = $winHeight / n;
    $('.wrapper > ul > li').css('height', $liHeight + 'px');
}

Предварительный просмотр в jsfiddle: http://jsfiddle.net/reKSm/1/

1
Nabil Kadimi 25 Янв 2013 в 23:25

Я внес некоторые изменения в ваше форматирование и структуру, но я считаю, что это отвечает всем вашим потребностям. http://jsfiddle.net/ZBwa2/

//Default, global values.
var numLi = 10;

$(document).ready(function(){

  // Create The Tree:
    $('.wrapper').append('<ul />');        
    for (var x = 1; x <= numLi; x++) {
        $('.wrapper > ul').append('<li class="option">Root Option ' + x + '</li>');
    }

  // Call the update function on doument ready and window resize
    update();
    $(window).on('resize', update);
});

function update () {
    var $winHeight = document.documentElement.clientHeight,
        $liHeight = $winHeight / numLi;

    $('.wrapper .option').css('height', $liHeight);

    console.log(": Window Resized :");
    console.log("Window Height = "+$winHeight);
    console.log("Li Height = "+$liHeight);
}
1
DACrosby 25 Янв 2013 в 23:22