0

さて、私には独特の状況があります。最初に、<li>jQueryを使用して10を作成していappend()ます。次に、それぞれの高さをウィンドウの高さ/ 10に調整し<li>て、全体として画面全体の高さになるようにします。私の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

コードに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 に答える
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

これですか？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（）関数に配置しないでください。すでに1つあります:)

于 2013-01-25T23:27:07.637 に答える