Is there a way to change the property of a class with jquery?

Question

This question might be a duplicate or stupid. I've read questions kind of similar to this but not this exact thing.

Suppose I have two dynamic generated li's with classes of .someclass and .someclass2 and both have different widths that needs to be calculated on the page load.

So, is there a way to set the calculated width to the classes once instead of setting the width every time a new li is generated?

We can do this with css, If the width is known, .someclass { width: 20px;} .someclass2 { width: 50px;} and then whenever a new element generates the css gets applied to them.

Applying width every time there's a append happening

$('#somediv').click(somefunction);

function somefunction() {
    $('#somediv').append('<li class="someclass"><li class="someclass2"></li></li>');

    $('.someclass').css('width', $(document).width() - 112); //every time

    $('.someclass2').css('width', $(document).width() - 250);  //every time

}

Applying width once - Is there a way to do it only once?

$('.someclass').css('width', $(document).width() - 112);  //once, but it will not work

$('.someclass2').css('width', $(document).width() - 250);  //once, but it will not work

$('#somediv').click(somefunction);

function somefunction() {

  $('#somediv').append('<li class="someclass"><li class="someclass2"></li></li>');

}

What if there are way more elements and it happens frequently, would there be any performance difference?

You're missing the type after you calculate the width/height values (px, %, em). — Rui Silva, Apr 12 '16 at 11:38
What you can do is give same common class to dynamic element and update the width of all the element having common class using .each function of jqQuery. Using this you don't have to write multiple lines. — Alok Patel, Apr 12 '16 at 11:39
or you can set the width inline with the `style` attribute of the `li` element. Thus having the option of many different widths — Velimir Tchatchevsky, Apr 12 '16 at 11:44
@Rui jQuery will be automatically adding `"px"`: _"When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method."_ — James Thorpe, Apr 12 '16 at 11:44

Muhammad Hamada · Answer 1 · 2016-04-12T12:02:23.083

Here we can create a cssText using JS, so we can set custom values for each css class.

Then create a style element and set its content equals the predefined cssText

var cssText = '.someClass {width:' + (window.innerWidth - 100) + 'px;} .someClass2 {width:' + (window.innerWidth - 200) + 'px; }',
    head = document.head,
    style = document.createElement('style');

if (style.styleSheet){
    style.styleSheet.cssText = cssText;
} else {
    style.appendChild(document.createTextNode(cssText));
}

head.appendChild(style);

Now all what you need to do it:

Run the above code to create the required classes
Call your code whenever you want without needing to add css styles each time

Is there a way to change the property of a class with jquery?

1 Answers1