我打算用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：

回答

相關問題