CODEWITHSUNDEEP
jquerycssjquery-selectors
levi
levi

Reputation: 25091

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

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

Upvotes: 25

Views: 62290

Answers (6)

Sampson
Sampson

Reputation: 268344

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

Upvotes: 46

Vishwanath Dalvi
Vishwanath Dalvi

Reputation: 36621

<html>
<head>
<title>Document</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">
$("document").ready(function(){
$("#container > *").css("color","red");
});
</script>

<style type="text/css">
.a { color: Navy; }
.b { color: Maroon; }

</style>
</head>
<body>

    <ul id="list1">
        <li ><a href="some.pdf">PDF</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
    </ul>
<div id="container">    
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
</div>
</body>
</html>

Upvotes: 2

kei
kei

Reputation: 20491

$("#content *").css("width","100%"); //everything inside #content

or

$("#content > *").css("width","100%"); //just the direct children of #content

Upvotes: 4

DanielB
DanielB

Reputation: 20230

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.

Upvotes: 10

phihag
phihag

Reputation: 287835

In general, fixing style sheets with JavaScript is a bad idea. You'll end up with a mess of automatically changed styles.

Luckily, you can solve your problem in CSS:

#content div,#content p,#content etcc {width: 100%;}

You can match all direct children by replacing the spaces with > (for example, #content>div).

If you don't want to enumerate all element names in #content, just use #content * (or #content>* for all direct children).

Upvotes: 1

RoToRa
RoToRa

Reputation: 38400

CSS:

#content > * { /* applies to all direct children of #content */
  width: 100%;
}

Of if you have to use JavaScript/jQuery:

jQuery("#content > *").css("width", "100%");

Upvotes: 2

Related Questions