基於動態內容創建css樣式

Question

我有一個使用jQuery移動的輸入元素。會發生什麼，是加速用戶使用滑塊這將創建一個像這樣的輸入元素：

for(var a = 0;a < $(this).val();a++) { 
     $("#boxnumber").append('<div data-role="fieldcontain"><label for="boxamount" class="ui-input-text">Enter box ' + (a + 1) + ' number:</label><input type="text" name="boxamount-' + a + '-no" id="boxamount-' + a + '-no" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-a"/></div>') 
     } 

問題是2倍。首先找到一種方法來設置箱量的CSS？這是一個問題的原因是對於每個值，boxamount名稱都會更改。

boxamount-' + 1 + '-no" id="boxamount-' + 1 + '-no, boxamount-' + 2 + '-no" id="boxamount-' + 2 + '-no

等。其次，覆蓋jQuery UI的創造我自己的類。所以我想要做的是這樣的：

#boxnumber input#boxamount- <- The problem. This is dynamic. I can use any 
class that you wish here and specify in the input. 

{ 

    width:25%; 
    margin: 0 0 0 10px; 
    display: inline-block; 
} 

我會很感激，如果有人可以讓我看到熱的克服這一點。在css3中有沒有一些狂野的命令？謝謝

Answer 1

您可以簡單地輸入HTML標記添加一個類：

<input type="text" 
    name="boxamount-' + a + '-no" 
    id="boxamount-' + a + '-no" 
    class="boxamount ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-a" /> 

和風格類似以下內容：

#boxnumber input.boxamount 
{ 
    width:25%; 
    margin: 0 0 0 10px; 
    display: inline-block; 
} 

Answer 2

你可以在代碼中添加一個類嗎？

如果不是，你可以通過jQuery添加它。

$('#boxnumber input').filter(function() {return $(this).attr("id").substr(0,9) == 'boxamount'}).addClass('custom-class'); 

，然後輕鬆地設置樣式

#boxnumber input.custom-class 
{ 

    width:25%; 
    margin: 0 0 0 10px; 
    display: inline-block; 
}