我需要一个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>
答案 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
希望这会有所帮助......