jquery - 生成具有间隔的 li 并调整所有大小以水平适应窗口

Question

我正在使用 jquery 创建 li，每个间隔最多只创建 5 次。并且每 li 边界宽度也会增加。问题是我希望所有 li 都适合水平对齐的窗口/页面。

我在每个时间间隔所做的是通过获取窗口宽度并将其除以当前 li 长度来调整 li 宽度。但是每个 li 都有不同的 border-width，所以我还需要计算它。

这就是我目前所拥有的。

<style>
    * { margin:0; padding:0;}
    ul { list-style:none; height:300px; width:100%;}
    li { display:block; float:left; height:100%; border:1px solid blue;}
</style>

<script>
$(document).ready(function() {
    var w = $(window).width();

    var interval = setInterval(function(){

        var li = $('<li>');

        var l = $('li').length+1;

        li.css('border-width', l);

        $('ul').append(li);

        $('li').width((w-l*2)/l);

        if($('li').length > 4){
            clearInterval(interval);
        }

    }, 2000);
});
</script>

Answer 1

只需设置 CSS box-sizing:border-box给你的<li>所以你不必担心 border-width计算，然后设置其百分比宽度。

$(document).ready(function() {

    var w = $(window).width();

    var interval = setInterval(function(){

        var li = $('<li>');

        var l = $('li').length+1;

        li.css('border-width', l);

        $('ul').append(li);

        $('li').css({'width':(100/l)+'%'});

        if($('li').length > 4){
            clearInterval(interval);
        }

    }, 2000);

});

同时检查这个 fiddle