0

好的，我有一个独特的情况，首先我<li>使用 jQuery 创建 10 s 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);
}

我的问题是，如果您查看控制台，您会发现它没有准确地更新窗口的高度。当您调整窗口大小时，它不会记录低于您上次刷新页面时的值！

4

3 回答 3

1

你是这个意思吗？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。放置<!doctype html>在您的 html 文件的开头，它将起作用。

并且也不要将上面的 JS 代码放到另一个 $(document).ready() 函数中。At 已经有一个了:)

于 2013-01-25T23:27:07.637 回答
1

我对您的格式和结构进行了一些修改，但我相信这可以满足您的所有需求。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);
}
于 2013-01-25T23:22:23.367 回答
1

我在您的代码中没有看到任何 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/

于 2013-01-25T23:12:22.640 回答