Question

我需要一个10 * 10的div表，所以我试图用jquery / php来做...你能帮助我或建议一个更好的方法吗？

<html>
    <head>
        <title>Jquery</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="#container">
            <?php
                for ($i=0; $i < 100; $i++) { 
                    echo "<div class=\"box\"></div>";
                }
            ?>
        </div>
    </body>

</html>
<script>
    $(".box").each(function(i) {
        $(this).css({
            "margin-left" : String(15*(i%10)),
            "margin-top" : String(15*(i\10))
        })
    });

    alert($(".box").size());
</script>

Answer 1

为什么不使用简单的CSS？不需要javascript和计算（两者都需要exta资源）。

.box{
    display: inline-block;
    vertical-align: top;
    width: 10%; /* 100%/10items -> 10% each */
}

这确实不需要.box之间的空格，但你没有那些atm *：

<div id="container">
    <?php 
        for ($i=0; $i < 100; $i++) { 
            echo '<div class="box"></div>';
        }
    ?>
</div>

*您可以在代码的源代码中使用空格，制表符和换行符，并将元素设置为浮动，每个人我不是浮动的粉丝，IMO他们比他们修复的更多。

只有PHP和表（不要真的推荐这个，我喜欢div，但它是表格数据）：

echo '<tr>';
$j=0;
for ($i=0; $i < 100; $i++) { 
    echo '<div class="box"></div>';
    if( ++$j==10 && $i!==100){ echo '</tr><tr>'; $j=0;} // add new line and reset
}
echo '</tr>';

Answer 2

从发布的评论中我得出的结论是，您应该将您的脚本放在html标记内，并确保其在body标记下面。

    <html>
        <head>
            <title>Jquery</title>
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
            <link href="style.css" rel="stylesheet" type="text/css">
        </head>

        <body>
            <div id="#container">
                <?php
                    for ($i=0; $i < 100; $i++) { 
                        echo "<div class=\"box\"></div>";
                    }
                ?>
            </div>
<script>
        $(".box").each(function(i) {
            $(this).css({
                "margin-left" : String(15*(i%10)),
                "margin-top" : String(15*(i\10))
            })
        });

        alert($(".box").size());
    </script>
        </body>
    **//Or you can place the script here too**
    </html>

了解更多信息Click Here

希望这会有所帮助......

jquery每个函数都不起作用

2 个答案: