Creating css style based on dynamic content

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

mreq · Accepted Answer · 2011-08-27 13:58:00Z

3

Can you add a class in code?

If not you can add it via jQuery.

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

and then easily style it

#boxnumber input.custom-class
{

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

edited Aug 27, 2011 at 13:58

answered Aug 27, 2011 at 13:52

mreq

6,5524 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

William Niu · Accepted Answer · 2011-08-27 14:30:07Z

2

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

answered Aug 27, 2011 at 14:30

William Niu

15.9k8 gold badges58 silver badges93 bronze badges

Collectives™ on Stack Overflow

Creating css style based on dynamic content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related