Question

所以下面我有我的页面。它生成4个div框（2x2）并动态地为它们提供ID。我希望能够添加等于长度/高度的行/列。因此，如果我添加一个列，它将在另外两个div框中自动将“newline”类放在正确的div上以格式化。但我也需要它反向工作，所以如果删除行/列，它会保持一切有条理。

<html>
    <head>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $('#btn').click(function(){
                GenerateIDs();
            });

            // Generates IDs dynamically
            function GenerateIDs(){
                var row = 1;
                var col = 0;
                $('body div div').each(function(){
                    if ($(this).hasClass('newline'))
                        {
                        row += 1;
                        col = 1;
                        }
                    else
                        col += 1;
                    $(this).attr('id', row + '-' + col);
                });
            }
        });
    </script>
    <style>
        body div div {background:gray; border:1px solid black; float:left; height:50px; margin:5px; width:50px;}
        .newline {clear:left;}
    </style>
</head>

<body>
    <div>

        <div></div>
        <div></div>
        <div class="newline"></div> <!-- Ideally dynamic from the start -->
        <div></div>

    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <input id="btn" type="button" value="JQuery" />
</body>
</html>

所以，如果我添加了列......

    <div>

        <div></div>
        <div></div>
        <div></div>
        <div class="newline"></div>
        <div></div>
        <div></div>

    </div>

然后碰巧添加一行......

    <div>

        <div></div>
        <div></div>
        <div></div>
        <div class="newline"></div>
        <div></div>
        <div></div>
        <div class="newline"></div>
        <div></div>
        <div></div>

    </div>

DIV-Grid可以增长和缩小？

0 个答案: