JQuery - Wenden Sie CSS-Stil auf alle Elemente in angegebenen div?

Habe ich eine situation, wo ich am Aufbau der mobilen theme für eine wordpress-website.
Nun, was ich tun möchte ist, greifen alle Elemente (p, divs, etcc) im Rahmen der "#content" - div und css anzuwenden "width: 100%" zu jeder dieser untergeordneten Elemente.

Der Grund, warum ich wollen, das ist, im Falle, jemand setzt eine Feste Breite für ein div, das ich brauche, es zu überschreiben, und wieder es zu 100%, so dass es nicht cutoff, wenn die Anzeige auf einem mobilen Gerät mit einem kleineren Bildschirm.

Ich würde gerne wissen, wie dies erreicht werden kann, mithilfe von Jquery.

Ich Schätze jede Hilfe mit diesem.
Dank

Kommentar zu dem Problem
Wenn Sie die Einrichtung einer "mobile-Thema", sicherlich haben Sie eine "mobile-stylesheet"? Verwenden Sie CSS, um dies zu ändern, nicht JavaScript. Kommentarautor: thirtydot

InformationsquelleAutor der Frage levi | 2011-06-30

  1. 39

    Manchmal, jQuery ist die falsche Weg...

    Sollten Sie nicht verwenden die jQuery-es sei denn, es bietet Ihnen ein legitimes Vorteil. Oft mit standard-JavaScript wird Ihnen enorme performance-Vorteile. Mit Ihrer situation, Sie könnten etwas tun, wie die folgenden:

    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

    Dass gesagt wird, die jQuery-Methode ist ziemlich einfach als gut.

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

    Diese laufen nach unten in jedem level von #content, die alle Elemente.

    Online-Demo: http://jsbin.com/otunam/edit

    Performance-Unterschiede

    Mit http://jsperf.com zu vergleichen mit den peformance Unterschied hier sehen wir das Ausmaß der speed-raw-JavaScript hat über die jQuery-alternative. In einem test JavaScript abschließen konnte, 300k Operationen in der Zeit dauerte es, jQuery zu vervollständigen 20k.

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

    Aber, Warum JavaScript?

    Letztlich die Frage, ob jQuery oder Raw JavaScript besser ist, ist eine rot-Hering, ablenken von der eigentlichen Frage - warum scripting? Wenn Sie erkennen, eine Handy-browser, laden Sie ein neues stylesheet mit mobile Regeln:

    #content * { width:100% }

    InformationsquelleAutor der Antwort Sampson

  2. 5

    Hier gehen Sie:

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

    Könnte man überschreiben, es im CSS zu:

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

    !important versichern, dass es überschreibt alle (einschließlich inline-style-Definitionen.

    InformationsquelleAutor der Antwort DanielB

  3. 3

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

    oder

    $("#content > *").css("width","100%"); //nur die direkten Kinder von #content

    InformationsquelleAutor der Antwort kei

  4. 2
    <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>

    InformationsquelleAutor der Antwort mr_eclair

  5. 1

    CSS:

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

    Wenn Sie die Verwendung von JavaScript/jQuery:

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

    InformationsquelleAutor der Antwort RoToRa

  6. 1

    Im Allgemeinen die Festsetzung von style sheets mit JavaScript ist eine schlechte Idee. Sie werden am Ende mit einem Durcheinander von automatisch geänderten Stile.

    Glücklicherweise können Sie lösen Ihr problem in CSS:

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

    Können Sie mit allen direkten Kinder durch das ersetzen der Leerzeichen durch > (zum Beispiel #content>div).

    Wenn Sie nicht wollen, um alle aufzuzählen, element-Namen in #content, verwenden Sie einfach #content * (oder #content>* für alle direkten Kinder).

    InformationsquelleAutor der Antwort phihag

Schreibe einen Kommentar