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

Question

我有一个情况,我正在为wordpress网站设置一个移动主题.现在我想要做的是,抓住"#content"div中的任何元素(p,div,etcc),并将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 将确保它覆盖所有(包括内联样式)定义.