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将确保它覆盖所有（包括内联样式）定义。

Answer 3

$("#content *").css("width","100%"); // #content

中的所有内容

或

$("#content > *").css("width","100%"); //只是#content

的直接孩子

Answer 4

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

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中的所有元素名称，只需对所有直接子项使用#content *（或#content>*）。

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

6 个答案: