1

我想用 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 根本不起作用。

当我将 alert 放入 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));
}

谢谢！

4

3 回答 3

4

此代码段语法错误：

appendTo("$(#SmallNailArea"));

它应该是：

appendTo($("#SmallNailArea"));
于 2013-06-13T00:24:42.627 回答
1

首先，我认为这个逻辑可以更好。看这个小提琴。我不知道这是否显示了您预期的结果。

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

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

一旦你得到它，newEl它就更容易操作了。因此，我创建了 vartmp以保留新元素以按顺序在其上附加另一个元素。

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;

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

我希望它有所帮助。

于 2013-06-13T00:40:24.383 回答
1

你的问题不清楚，你没有创建任何活生生的例子，但是......

我创建了jsFiddle 示例

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

于 2013-06-13T00:47:06.863 回答