jquery - 为什么这不起作用？

Question

我正在尝试使用 jquery 创建 5x3 正方形。这是我的代码:

CSS:

#SmallNailArea
{
    position:relative;
    height:85%;
    width:100%;
}

.SmallNailLine
{
    background-color:blue;
    position:relative;
    width:100%;
    height:15%;
    clear:both;
}

.SmallNail
{
    background-color:black;
    position:relative;
    height:100%;
    width:10%;
    margin:4%
}

jquery:

$(document).ready(function()
{

var length = 15;
var lineCounter = 0;
var dh = $(".SmallNail").height();
$(".SmallNail").css('width', dh + 'px');

for (var i=1;i<=length;i++)
{
    if ((i-1)%3==0)
    {
        lineCounter++;
        $("<div></div>").attr('class','SmallNailLine').appendTo("$(#SmallNailArea"));
    }
    $("<div></div>").attr('class','SmallNail').appendTo("$(#SmallNailLine").eq(lineCounter));
}

});

jquery 似乎根本不起作用。

当我将警报放入 for 中时，它确实会警报正确的值，但没有发生其他情况。

for (var i=1;i<=length;i++)
{
    if ((i-1)%3==0)
    {
        alert(lineCounter);
        lineCounter++;
        $("<div></div>").attr('class','SmallNailLine').appendTo("$(#SmallNailArea"));
    }
    alert(i);
    $("<div></div>").attr('class','SmallNail').appendTo("$(#SmallNailLine").eq(lineCounter));
}

谢谢!

Answer 1

此片段语法错误:

appendTo("$(#SmallNailArea"));

应该是:

appendTo($("#SmallNailArea"));