0

所以下面我有我的页面。它生成 4 个 div 框 (2x2) 并动态地为它们提供 ID。我希望能够添加等于长度/高度的行/列。因此，如果我添加一列，它将在另外 2 个 div 框中，并自动将“换行符”类放在正确的 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>
4

0 回答 0