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