jquery每个函数都不起作用

时间:2014-07-10 13:17:50

标签: jquery each

我需要一个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>

2 个答案:

答案 0 :(得分: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>';

答案 1 :(得分:0)

从发布的评论中我得出的结论是,您应该将您的脚本放在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

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