Question

I have an input element that I am using with jQuery mobile. What happens, is evertime a user uses a slider this creates an input element like thus:

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

The problem is 2 fold. Firstly to find a way to set the box amount css? the reason that this is a problem is that for each value, the boxamount name changes.

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

etc. Secondly, to overwrite the jquery ui and create my own class. So what at I am looking to do is something like this:

#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;
}

I would be grateful if someone could show me hot to overcome this. Is there some kind of wild command in css3? thanks

Answer 1

You may simply add a class in the input HTML markup:

<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" />

And style the class like following:

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