동적 콘텐츠를 기반으로 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 태그에 클래스를 추가 할 수 있습니다 스타일

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

Answer 2

코드에 클래스를 추가 할 수 있습니까?

그렇지 않으면 jQuery를 통해 추가 할 수 있습니다. 클래스 다음과 같이

<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').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; 
}