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

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

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

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

我很感激任何帮助。 谢谢

Answer 1

有时，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% } 

Answer 2

干得好：

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

您也可以在CSS中覆盖它：

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

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

Answer 3

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

要么

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

Answer 4

         
 
PDF
 
d
 
d
 
d
 
d
 
 
 
This is paragraph 1
 
This is paragraph 2
 
This is paragraph 3
 
This is paragraph 4
 
   

Answer 5

CSS：

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

如果你必须使用JavaScript / jQuery：

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

Answer 6

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

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

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

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

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