Jquery - 将css样式应用于指定div中的所有元素？答案

【问题标题】：Jquery - apply css style to all elements within specifed div?Jquery - 将css样式应用于指定div中的所有元素？
【发布时间】：2011-09-26 01:54:33
【问题描述】：

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

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

我想知道如何使用 Jquery 来实现。

感谢您对此提供的任何帮助。谢谢

【问题讨论】：

如果您要设置“移动主题”，您肯定有“移动样式表”吗？使用 CSS 进行更改，而不是 JavaScript..

标签： jquery css jquery-selectors

【解决方案1】：

CSS：

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

如果你必须使用 JavaScript/jQuery：

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

【讨论】：

【解决方案2】：

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

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

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

您可以通过将空格替换为>（例如#content>div）来匹配所有直接子级。

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

【讨论】：

【解决方案3】：

给你：

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

你也可以在 CSS 中覆盖它：

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

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

【讨论】：

【解决方案4】：

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

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

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

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

话虽如此，jQuery 方法也很简单。

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

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

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

性能差异

在这里使用http://jsperf.com 来比较性能差异，我们可以看到原始JavaScript 与jQuery 替代方案相比的速度幅度。在一项测试中，JavaScript 能够在 jQuery 完成 20k 的时间内完成 300k 操作。

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

但是，为什么是 JavaScript？

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

#content * { width:100% }

【讨论】：

假设我已经为其他目的加载 jquery，使用标准 js 是否仍会获得性能优势？
@levi 您可以在此处查看性能比较：jsperf.com/resizing-children - 在此处使用原始 JavaScript 要快得多。
感谢您的精彩回答！
这样详细的答案至少应该有一个+1。完成。
很高兴知道 javascript 中没有提供函数来管理继承样式。所以我不会用谷歌搜索它。而且我总是使用 Javascript，不像这里的大多数画家。

【解决方案5】：

$("#content *").css("width","100%"); //#content 里面的一切

或

$("#content > *").css("width","100%"); //只是#content的直接子代

【讨论】：

【解决方案6】：

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

【讨论】：