2013-11-04 198 views
1

我有附加一個數字按鍵與下面的代碼股利和希望你能幫助我在這兩個問題的函數:jQuery的初學者:如何附加之間插入空格

$(myDiv).append(btnTop1).append(btnTop2).append(btnTop3)...; 
  1. 總共我追加了15個按鈕,就像上面的例子。有沒有一種方法可以將這個縮短而不是將它們全部添加到一行中,例如通過使用每個循環,如果,我如何實現這一目標?
  2. 我想在這些按鈕之間插入一個或三個空格。我怎樣才能做到這一點與上述功能?我是否會創建像varSpace1=" "varSpace3="  &nbsp"這樣的變量,然後將它們追加到?

非常感謝任何幫助。

+5

不是使用空格或' ',這是一個非獨立測量的測量,使用CSS'padding-left'或'margin-left'來設置你想要的確切間隔。 –

+0

這些按鈕'btnTop1','btnTop2'等等。你爲什麼不在創建它們時追加它們? – George

+0

您是否嘗試過使用數組對象?也許是JSON?它會更短我想 –

回答

1

最好使用CSS規則進行間距。你可以定義一個CSS類,然後給你的按鈕元素。

.my-button { 
    margin-left: 5px; 
} 

一類添加到您的按鈕,你可以不喜歡它:

$(yourButton).addClass('my-button'); 

您還可以使用內嵌class屬性:

<button class="my-button">some text</button> 

現在,無需究竟是如何知道你的代碼的其餘部分是安裝的,我可以建議在追加多個按鈕時提供的最好的改進是利用append支持ar一系列DOM元素。請注意,數組必須包含DOM元素,而不是jQuery對象。如果您的按鈕變量是jQuery的對象,你可以做到以下幾點:

$(myDiv).append($.map([btnTop1, btnTop2, btnTop3], function ($btn) { 
    return $btn[0]; 
})); 

如果你能你很可能重構你的代碼,併爲您創建它們追加按鈕:

var $buttonsFrag = $(document.createDocumentFragment()); 

$buttonsFrag.append($('<button class"my-button">text</button>')); 

//... 

$(myDiv).append($buttonsFrag); 

注:使用文檔片段允許在單個迴流中將按鈕附加到DOM。

+0

完美 - 這就是我正在尋找的。謝謝 ! – user2571510

+0

@ user2571510我很高興我可以提供幫助。 – plalx

+0

對不起,還有一個問題:間距對CSS類很好,但是當我像上面那樣編寫數組時,它不再追加按鈕 - 是否有另一種方法在這裏寫數組? – user2571510

2

爲佈局目的使用空間是非確定性的。這意味着,根據字體渲染大小,它將看起來完全不同,只有一個瀏覽器與下一個瀏覽器,以及一個PC到下一個瀏覽器。

更好的方法是使用CSS設置您需要的確切間隔。這更精確,更好地分離關注點。

假設每個btnTopX變量是像<button>Click me</button>,這將工作:

$(myDiv).append(btnTop1).append(btnTop2).append(btnTop3); 
#myDiv button { 
    margin-left: 5px; 
} 

如果你需要某些情況下有較大的差距,一類添加到特定的按鈕,創建一個CSS選擇器那個元素。

+0

感謝您的快速回復,這有助於很多! – user2571510