jquery each function doesn't work

Question

i need a 10*10 table of divs so i'm trying to do it with jquery/php ... Could you help me or suggest a better way to do it?

<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>

think you should wrap the script into a `$(document).ready(` function. — davidkonrad, Jul 10 '14 at 13:20
I wouldn't recommend putting your script outside of the `html` tag. — esswilly, Jul 10 '14 at 13:20
@davidkonrad How that? Looks like OP doesn't need it althought he should set it inside `body` tag — A. Wolff, Jul 10 '14 at 13:21
`String(15*(i\10))` you escape the '1'. I guess you wanted to divide by 10 ? — ClmentM, Jul 10 '14 at 13:21
Thanks Clément, i confused the escape with the "int division" from .NET... with String(15*parseInt(i/10)) it works perfectly — XandruDavid, Jul 10 '14 at 13:23
@A.Wolff, it doesnt harm to be _sure_ the code is executed _after_ DOM is loaded. With 38K rep you have probably seen a zillion questions where lack of execution control was the case. It sprang to my eyes, a problem I posted a comment about this? — davidkonrad, Jul 10 '14 at 13:27
You use `latest jQuey`. I **strongly** recommend you dont do that. What if they update, but your code isn't up-to-date? Site broken! Just use the current lastest and build your site on that. — Martijn, Jul 10 '14 at 13:27
margin isn't position. using `left`, `top`, and `position` you could arrange things into a grid. They'll still have 0 size until you put some content in them. If the rows and columns of the grid have actual meaning, then `` is appropriate and easy. — , Jul 10 '14 at 13:27
Be carefull with absolute positioning! This is slower than just normal positioning! It has to calculate a lot more. — Martijn, Jul 10 '14 at 13:27

Martijn · Answer 1 · 2014-07-10T13:36:21.580

Why not using simple css? No need for javascript and calculations (which both cost exta resource).

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

This does require no spaces between the .box's, but you don't have those atm*:

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

*You can use spaces,tabs and newlines in your code's source and set the elements to float, per personally I'm not a fan of float, IMO they mess up more than they fix.

PHP only and tables (don't really recommend this, I like divs, but it ís tabular data):

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>';

score 0 · Answer 2 · edited May 23 '17 at 12:11

As from the comments posted i come to a conclusion that you should put your script inside the html tag, and also make sure its below body tag.

    <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>

For more info Click Here

Hope this helps...

I highly doubt this having any effect on the result. Might or might not be best practise, but it will work as expected — Martijn, Jul 10 '14 at 13:35

jquery each function doesn't work

2 Answers2