jQuery的每个功能不起作用

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>

*您可以在代码的源代码中使用空格，制表符和换行符，并将元素设置为float，就我个人而言，我不是float的粉丝，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>

欲了解更多信息，请点击这里

希望这可以帮助...