Mit Schlaufe verschidene Klassen Hinzufügen

frontend-guru · #1 (**permalink**) 18.12.2011, 18:19

Ich bin gerade dabei einen neuen Tumblr zu gestalten. Tumblr generiert für jedes bild ein div. Ich habe zwei verschieden layouts dieser div's. Wenn das BIld im Querformat ist sollte die Class .col2 hinzugefügt weden und sonst .col1. Ich habe jetzt das Problem das, wenn ich die Breite und höhe ermittle, wird immer nur die grösse des ersten Bilds ausgerechnet und deshalb immer nur col1 hinzugefügt.

Hier mein Script:

HTML-Code:

 var width = $("img").width();
        var height = $("img").height();

        if(width>height)
        {
            $(".box").addClass("col2");
        }else
        {
            $(".box").addClass("col1");
        }

Jetzt meine Frage: Kann ich den div's mit einer schlaufe verschiedene Klassen anhängen?

also so:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

Ich möchte immer 12 Div's pro Seite anzeigen. So soll die Berechnung 12 mal durchgeführt werden.

Ich hoffe Ihr könnt mir helfen.

Gruss

cebito · #2 (**permalink**) 18.12.2011, 18:32

Dein Script ist unvollständig, wo kommt denn das img-Objekt her? Im Übrigen fügst du mit bspw.

HTML-Code:

$(".box").addClass("col1");

allen Elementen mit der Klasse "box" die Klasse "col1" hinzu.
Auch hier wieder dasselbe, stell das Ding online, mit so ein paar Schnipseln ist dir nicht zu helfen.

frontend-guru · #3 (**permalink**) 18.12.2011, 19:22

Also hier ist der Link:
ReDesign Bloggingfor

ich habe mal eine schlaufe gebaut sie aber auskommentiert, denn es funktioniert noch nicht.

Gruss

Thielo · #4 (**permalink**) 18.12.2011, 19:44

Zitat:

Zitat von frontend-guru

Also hier ist der Link:
ReDesign Bloggingfor

ich habe mal eine schlaufe gebaut sie aber auskommentiert, denn es funktioniert noch nicht.

Gruss

Es heißt Schleife.. nicht Schlaufe..

frontend-guru · #5 (**permalink**) 18.12.2011, 21:12

Habe es geschafft. Habe es mit der jQuery .each() Fuktion gelöst.
Danke für die Zeit.

Gruss

Thielo · #6 (**permalink**) 18.12.2011, 22:10

Lösung noch zeigen für Leute die das gleich Problem haben.

Scheppertreiber · #7 (**permalink**) 19.12.2011, 00:40

Wenn's mit JQuery sein darf, dann einfach mit :even und

dd die Klassen setzen.

(bei 2 spalten. Dann sieht das Forum anscheind stat ": o d d " einen Grinser

)

frontend-guru · #8 (**permalink**) 19.12.2011, 08:48

Hier noch der Code Schnipsel mit welchem ich es geschafft habe:

Code:

$(".box").each(function () {
            var width = $(this).find("img").width();
            var height = $(this).find("img").height();

            if (width > height) {
                $(this).addClass("col2");
            } else {
                $(this).addClass("col1");
            }
        });

Gruss

protonenbeschleuniger · #9 (**permalink**) 19.12.2011, 09:05

Zitat:

Zitat von Scheppertreiber

Dann sieht das Forum anscheind stat ": o d d " einen Grinser :))

Dagegen gibt es eine Option:
[ ] Grafische Smileys deaktivieren

:o

Scheppertreiber · #10 (**permalink**) 19.12.2011, 09:10

Zitat:

Zitat von protonenbeschleuniger

Dagegen gibt es eine Option:
[ ] Grafische Smileys deaktivieren

auch in einer Schlaufe ?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Eine Eigenschaft mehren Klassen zuordnen	xhtmluser	CSS	3	25.11.2011 15:16
Klassen überschreiben?	Maik20b	CSS	7	03.12.2010 16:36
php Klassen - Einsatz und Sinn?	paracelsus	Serveradministration und serverseitige Scripte	306	17.02.2009 19:51
Links und Klassen	gala	CSS	8	09.08.2005 13:10
Klasse soll Formatierungen von anderen Klassen übernehmen?	Herbi	CSS	3	27.01.2004 23:03