web-dev-qa-db-ja.com

jquery-特定のdiv内のすべての要素にCSSスタイルを適用しますか？

wordpress Webサイトのモバイルテーマを設定している状況にあります。次に、 "＃content"内の要素（p、divsなど）を取得します"div、そしてcss" width：100％ "をそれらの子要素のそれぞれに適用します。

これが必要な理由は、誰かがdivの固定幅を設定した場合、それを上書きして100％に戻す必要があるため、画面の小さいモバイルデバイスで表示したときにカットオフにならないためです。

Jqueryを使用してこれを実現する方法を知りたいのですが。

私はこれでどんな助けにも感謝します。ありがとう

jquerycssjquery-selectors
20
levi

時々、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の代替に比べて速度がどれだけ大きいかがわかります。 1つのテストで、JavaScriptは、jQueryが20kを完了するのにかかる時間内に30万回の操作を完了することができました。

今すぐテスト： http://jsperf.com/resizing-children

しかし、なぜJavaScriptなのか？

結局のところ、jQueryとRaw JavaScriptのどちらが優れているかという問題は、本当の問題から注意をそらすような、やりがいのある質問です。なぜスクリプトを使用するのでしょうか。モバイルブラウザを検出した場合は、モバイルルールを含む新しいスタイルシートをロードします。

#content * { width:100% }
42
Sampson

どうぞ：

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

CSSでもオーバーライドできます。

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

!importantは、すべての（インラインスタイルを含む）定義をオーバーライドすることを保証します。

7
DanielB

$("#content *").css("width","100%"); // #content内のすべて

または

$("#content > *").css("width","100%"); // #contentの直接の子のみ

3
kei
<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>
2
mr_eclair

CSS：

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

JavaScript/jQueryを使用する必要がある場合：

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

一般に、JavaScriptを使用してスタイルシートを修正することはお勧めできません。自動的に変更されるスタイルの混乱が発生します。

幸い、CSSで問題を解決できます。

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

スペースを>で置き換えることにより、すべての直接の子を一致させることができます（例：#content>div）。

すべての要素名を#contentに列挙したくない場合は、#content *（またはすべての直接の子には#content>*）を使用します。

1
phihag