我有一个情况,我正在为一个WordPress网站设置一个移动主题.
现在我想做的是,在“#content”div中抓取任何元素(p,divs,etcc),并对每个这些子元素应用css“width：100％”.
现在我想做的是,在“#content”div中抓取任何元素(p,divs,etcc),并对每个这些子元素应用css“width：100％”.
我想要这样做的原因是,如果某人为div设置固定宽度,则需要覆盖该宽度,并将其恢复为100％,以便在具有较小屏幕的移动设备上查看时不会被截断.
我想知道如何使用Jquery来实现这一点.
我感谢任何帮助.
谢谢
解决方法
有时,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% }