javascript - Jquery 使递归 div 成为可能？

Question

不确定如何执行此操作，但我正在尝试使 div 的行为类似于在屏幕上均匀拉伸(stretch)的列(这已完成/很容易)，然后制作子列。这是我所拥有的: JS:

$(function() {
    cols = $('.column');
    parent_width = cols.parent().width();
    col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
    col_width = (Math.floor(parent_width/cols.size()-col_fluff));

    cols.each(function(){
        $(this).width(col_width);
    });
});

CSS:

#container{
    position:relative;
    width:100%;
    height:100%;
    margin-top:50px;
}
.column{
    float:left;
    top:0px;
    left:0px;
    margin-right:20px;
    outline:#000 solid 2px;
    width:20%;
}
.clear{
    clear:both;
}

HTML:

<div id="container">
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    </div>
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    </div>
    <div class="clear">clear</div>
</div><!-- end container -->

在您尝试插入内部列之前，这一切正常:

<div id="container">
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
        <div class="column">
            inner column
        </div>
        <div class="column">
            inner column
        </div>
    </div>
    <div class="column">
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    </div>
    <div class="clear">clear</div>
</div><!-- end container -->

有什么想法吗？

Answer 1

您可以按级别从外列到内列排列列宽:

定义一个函数，它接受包含 $('.column') 元素的最外层父元素并安排它的直接子元素，然后将相同的函数应用于每个 $('.column' ) child (现在作为 parent ，安排它的 child )递归...

$(function(){
    function Arrange(colsParent){

        cols = colsParent.children('.column');
        parent_width = cols.parent().width();
        col_fluff = parseInt(cols.css('padding-left'))
                   +parseInt(cols.css('padding-right'))
                   +parseInt(cols.css('margin-left'))
                   +parseInt(cols.css('margin-right'));
        col_width = (Math.floor(parent_width/cols.size()-col_fluff));

        cols.each(function(){
            $(this).width(col_width);
        });


        cols.each(function(){
            Arrange($(this));
        });
    }

    level1ColsParent = $('.column').first().parent();

    Arrange(level1ColsParent);
});