XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Jquery - jedes 3. Element auswählen. (http://xhtmlforum.de/showthread.php?t=65799)

DavidNF 20.09.2011 15:45

Jquery - jedes 3. Element auswählen.
 
Hallo - ich hoffe, hier finde ich eine Antwort auf mein Problem. Und zwar möchte ich jedes 3. (3,6,9,12,...) Element (li) via Jquery finden und diesem dann einen neuen Wert für "margin-right" zuweisen. Bisher habe ich es, leider ohne Erfolg, folgender maßen versucht. Kann mir jemand sagen, was ich da falsch mache?
Code:

<script>
$(function(){
$("li:nth-child(3)").css("margin-right", "0px");
});
</script>


hemfrie 20.09.2011 16:04

Damit jedes 3. selektiert wird, muss 3n innerhalb von nth-child() stehen. Ansonsten wird nur das 3. Element selektiert.

Code:

$(document).ready(function() {
    $("li:nth-child(3n)").css("margin-right", "0");
});


DavidNF 20.09.2011 16:52

Zitat:

Zitat von hemfrie (Beitrag 502718)
Damit jedes 3. selektiert wird, muss 3n innerhalb von nth-child() stehen. Ansonsten wird nur das 3. Element selektiert.

Code:

$(document).ready(function() {
    $("li:nth-child(3n)").css("margin-right", "0");
});


Das funktioniert bei mir leider auch nicht...

hemfrie 20.09.2011 17:01

bei mir funktioniert das. Zum Testen solltest Du vielleicht etwas auffälligeres machen als margin-right auf 0 zu setzen. Vielleicht funktioniert es und es gibt einfach nichts zu sehen :)

Test => http://jsfiddle.net/C7Kkk/

DavidNF 20.09.2011 17:12

Zitat:

Zitat von hemfrie (Beitrag 502724)
bei mir funktioniert das. Zum Testen solltest Du vielleicht etwas auffälligeres machen als margin-right auf 0 zu setzen. Vielleicht funktioniert es und es gibt einfach nichts zu sehen :)

Test => Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Der Grund scheint das Plugin "Masonry" zu sein: ohne Plugin geht es, aber mit nicht...Mist!

DavidNF 20.09.2011 18:00

Ich habe den ganzen Kram mal hochgeladen - hier.

Mein Ziel ist es, dass der rechte Rand (dunkel unterlegt) verschwindet. Das er noch da ist, sieht man daran, wenn ich die Breite von ".photo" auf 285px erhöhe. Dann sollten die vier Fotos nebeneinander nämlich die Breite von 1200px ([4*285]+[3*20]) füllen.

zeji 20.09.2011 18:14

Davon mal ganz abgesehen, macht es wenig Sinn, ein Bild welches 2562px × 1621px groß ist einfach per Html/Css klein zu schrumpfen. Die Bilddaten werden trotzdem in voller Größe geladen..... Benutze hier Thumbnails, die Ladezeiten sind ja grauenhaft...

DavidNF 20.09.2011 18:36

Zitat:

Zitat von zeji (Beitrag 502733)
Davon mal ganz abgesehen, macht es wenig Sinn, ein Bild welches 2562px × 1621px groß ist einfach per Html/Css klein zu schrumpfen. Die Bilddaten werden trotzdem in voller Größe geladen..... Benutze hier Thumbnails, die Ladezeiten sind ja grauenhaft...

1. Die Bilder sind jetzt nur für den Test noch so groß - werde sie später kleiner cropen.
2. Würde ich gerne Thumbnails verwenden, allerdings suche ich schon seit Tagen nach einem passenden Plugin, das ich auch mit Tumblr verwenden kann.

DavidNF 22.09.2011 12:59

Zitat:

Zitat von DavidNF (Beitrag 502729)
Ich habe den ganzen Kram mal hochgeladen - hier.

Mein Ziel ist es, dass der rechte Rand (dunkel unterlegt) verschwindet. Das er noch da ist, sieht man daran, wenn ich die Breite von ".photo" auf 285px erhöhe. Dann sollten die vier Fotos nebeneinander nämlich die Breite von 1200px ([4*285]+[3*20]) füllen.

Hat niemand eine Idee? Ich bin am verzweifeln...

hemfrie 22.09.2011 13:55

Da Du alles mit position:absolute positionierst und den Elementen dann jeweils ein left:0, left:300px, left:600px und left:900px verpasst, hat Dein margin (20px) überhaupt keine Funktion.

Deshalb stimmt Deine Rechnung ([4*285]+[3*20]) auch nicht. So wie es jetzt ist, setzt sich die Breite wie folgt zusammen: 900px (letztes Element) + 285px = 1185px

Du müsstest Dich erst einmal mit einigen CSS Grundlagen auseinandersetzen. Das würde Dir einiges an Ärger ersparen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:07 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023