1. 程式人生 > >jquery實現樓層巢狀(DIV巢狀)

jquery實現樓層巢狀(DIV巢狀)

經常看到評論區回覆樓層巢狀,也就是蓋樓,下面來用jquery來實現div佈局

程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.js"></script>
    <style>
        #maindiv{width:auto; height:auto; margin: 0 auto; position: relative;}
        .common{border:1px solid #1b6d85; padding: 20px;height:auto; width:auto;}
    </style>
</head>
<body>
<div id="maindiv" class="common">

</div>
<div id="jsdiv">

</div>
<script>
    $(function(){
        function setdiv(i,j){
            var cdiv=$('<div></div>');
            cdiv.addClass("common").text(i);
            $("#maindiv").wrapAll(cdiv);
            i++;
            if(i<=j){
                return setdiv(i,j);
            }else {
                return false;
            }
        };
        setdiv(1,10);
    })
    
</script>
</body>
</html>

效果圖: