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

jquery css jquery-selectors

51946 просмотра

6 ответа

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

Автор: levi Источник Размещён: 12.11.2019 09:39

Ответы (6)


42 плюса

Решение

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% }
Автор: Sampson Размещён: 30.06.2011 03:05

8 плюса

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.

Автор: DanielB Размещён: 30.06.2011 03:03

3 плюса

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

or

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

Автор: kei Размещён: 30.06.2011 03:05

2 плюса

<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>
Автор: mr_eclair Размещён: 30.06.2011 03:09

1 плюс

CSS:

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

Of if you have to use JavaScript/jQuery:

jQuery("#content > *").css("width", "100%");
Автор: RoToRa Размещён: 30.06.2011 03:03

1 плюс

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).

Автор: phihag Размещён: 30.06.2011 03:03
Вопросы из категории :
32x32