Jquery - 应用CSS样式到指定的div中的所有元素？ [英] Jquery - apply css style to all elements within specifed div?

问题描述

我有一个情况，我为一个wordpress网站设置一个手机主题。
现在我想做的是，抓取#contentdiv中的任何元素（p，divs，etcc），并将csswidth：100％应用到每个子元素。

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

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

我很感激任何帮助。
感谢

解决方案

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

您不应该使用jQuery，除非它提供了合法的优势。通常使用标准的JavaScript将给你巨大的性能优势。在你的情况下，你可以做如下：

  var i，
 tags = document.getElementById（内容）。getElementsByTagName（*），
 total = tags.length; 
 for（i = 0; 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替代的速度。

现在测试：http://jsperf.com/resizing-children

但是，为什么是JavaScript？

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

  #content * {width：100％} 
  

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.

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.

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

I appreciate any help with this. Thanks

解决方案

Sometimes, jQuery is the wrong way...

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:

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

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

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

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

Online Demo: 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.

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

But, Why 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:

#content * { width:100% }

这篇关于Jquery - 应用CSS样式到指定的div中的所有元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！