Jquery - apply css style to all elements within specifed div?

Question

I have a situation where I am setting up a mobile theme for a wordpress website. Now what I would like to do is, grab any elements (p, divs, etcc) within the "#content" div, and apply css "width: 100%" to each of those child elements.

The reason I want to this is, in event somebody sets a fixed width for a div, I need it to overwrite that and revert it to 100% so it does not get cutoff when viewing on a mobile device with a smaller screen.

I would like to know how this can be achieved using Jquery.

I appreciate any help with this. Thanks

Answer 1

Sometimes, jQuery is the wrong way...

You shouldn't use jQuery unless it's offers a legitimate advantage. Often times using standard JavaScript will give you enormous performance advantages. With your situation, you could do something like the following:

var i,     tags = document.getElementById("content").getElementsByTagName("*"),     total = tags.length; for ( i = 0; i < total; i++ ) {   tags[i].style.width = '100%'; } 

Online Demo: http://jsbin.com/otunam/3/edit

That being said, the jQuery method is pretty simple as well.

$('#content').find('*').width('100%'); 

This will run down into each level of #content, affecting all elements.

Online Demo: http://jsbin.com/otunam/edit

Performance Differences

Using http://jsperf.com to compare the peformance difference here we can see the magnitude of speed raw JavaScript has over the jQuery alternative. In one test JavaScript was able to complete 300k operations in the time it took jQuery to complete 20k.

Test Now: http://jsperf.com/resizing-children

But, Why JavaScript?

Ultimately the question of whether jQuery or Raw JavaScript is better is a red-herring, distracting from the real question - why use scripting at all? If you detect a mobile browser, load a new stylesheet containing mobile rules:

#content * { width:100% } 

Answer 2

Here you go:

$('#content > *').css('width', '100%'); 

You could override it in CSS too:

#content > * {     width: 100% !important } 

!important will assure that it overrides all (including inline style) definitions.