Jquery - 将css样式应用于指定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.

我有一个情况，我正在为wordpress网站设置一个移动主题。现在我想要做的是，抓住“#content”div中的任何元素（p，div，etc），并将css“width：100％”应用于每个子元素。

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.

我想这样做的原因是，如果有人为div设置固定宽度，我需要它覆盖它并将其恢复为100％，以便在具有较小屏幕的移动设备上查看时不会截止。

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

我想知道如何使用Jquery实现这一目标。

I appreciate any help with this. Thanks

我很感激任何帮助。谢谢

6 个解决方案

#1

Sometimes, jQuery is the wrong way...

有时，jQuery是错误的方式......

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:

你不应该使用jQuery，除非它提供合法的优势。通常使用标准JavaScript会给您带来巨大的性能优势。根据您的情况，您可以执行以下操作：

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

在线演示：http：//jsbin.com/otunam/3/edit

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

话虽这么说，jQuery方法也很简单。

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

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

这会影响到#content的每个级别，影响所有元素。

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

在线演示：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.

使用http://jsperf.com来比较性能差异，我们可以看到原始JavaScript的速度超过jQuery替代品。在一次测试中，JavaScript能够在jQuery完成20k时完成300k操作。

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

立即测试：http：//jsperf.com/resizing-children

But, Why JavaScript?

但是，为何选择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:

最终，jQuery或Raw JavaScript是否更好的问题是一个红色的鲱鱼，分散了真正的问题 - 为什么要使用脚本？如果您检测到移动浏览器，请加载包含移动规则的新样式表：

#content * { width:100% }

#2

Here you go:

干得好：

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

You could override it in CSS too:

您也可以在CSS中覆盖它：

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

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

！important将确保它覆盖所有（包括内联样式）定义。

#3

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

$（“＃content *”）。css（“width”，“100％”）; // #content里面的一切

要么

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

$（“＃content> *”）。css（“width”，“100％”）; //只是#content的直接孩子

#4

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

#5

CSS:

CSS：

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

Of if you have to use JavaScript/jQuery:

如果你必须使用JavaScript / jQuery：

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

#6

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

通常，使用JavaScript修复样式表是个坏主意。你最终会得到一堆自动更改的样式。

Luckily, you can solve your problem in CSS:

幸运的是，您可以在CSS中解决您的问题：

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

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

您可以通过用>替换空格来匹配所有直接子节点（例如，＃content> div）。

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

如果您不想枚举#content中的所有元素名称，只需使用#content *（或#content> *表示所有直接子元素）。

#1