的CSS：

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 (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"));

Answer 2

首先，我认为这种逻辑可以更好。看this fiddle。我不知道是否显示出您预期的结果。

在jQuery中，您可以创建一个元素并以此方式获取它：

var newEl = $('<div></div>');

一旦你在newEl上获得它，就更容易操纵它。所以我创建了var tmp以保持新元素按顺序在其上附加另一个元素。

if ((i-1)%3==0)
{
    tmp = $("<div></div>").addClass('SmallNailLine');
    $("#SmallNailArea").append(tmp);
}
tmp.append($("<div></div>").addClass('SmallNail'));

我也移动了这段代码......

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

...到最后导致对象.SmallNail没有在您调用它的前缀上创建。

另一个技巧是将#SmallNailArea设置为height，以height:100px;为单位{{1}}。

最后，但同样重要的是@tymeJV显示的错误，这对于代码的工作至关重要。

我希望它有所帮助。

Answer 3

你的问题不明确，你没有创建任何实例，但是......

我创建了jsFiddle example

<强> JS：

$(document).ready(function () {
    var length = 15;

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

此外，您必须在float: left;中添加.SmallNail。

为什么这不起作用？

的CSS：

的jquery：

3 个答案: