我打算用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)); 
}

谢谢！

来源

2013-06-13 Eran Yomtovyan

检出[JSFiddle]（http://jsfiddle.net/）。当他们看到你的代码实际运行时，SO的好人会帮助你更容易。 –

你应该真的使用一个调试工具。每个现代Web浏览器都内置了这样的工具。通常他们被称为**开发人员工具**或类似的东西，是的，他们通常也被埋在一些菜单中，以便普通用户不会与它混淆。然而，作为开发人员，您将从错误消息中获得很多，这些消息毫无疑问会在他们的javascript控制台中打印出来。 – dualed

这个片段的语法是错误的：

appendTo("$(#SmallNailArea"));

它应该是：

所有的

appendTo($("#SmallNailArea"));

来源

2013-06-13 00:24:42 tymeJV

首先，我觉得这个逻辑会更好。查看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未在beggining，你去过的地方调用它创建。

另一个技巧是设置#SmallNailArea与height像素height:100px;，因为this。

最后，但并非不那么重要，@tymeJV显示的错误对于代码工作至关重要。

我希望它有帮助。

来源

2013-06-13 00:40:24 DontVoteMeDown

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

我创建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。

来源

2013-06-13 00:47:06 Shaddow

不错的例子。 +1 – DontVoteMeDown

为什么这不起作用？

CSS：

的jQuery：

回答

相关问题