zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Jquery - jedes 3. Element auswählen.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2011, 15:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2010
Beiträge: 52
DavidNF befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2011, 16:04
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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");
});
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2011, 16:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2010
Beiträge: 52
DavidNF befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hemfrie Beitrag anzeigen
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...
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2011, 17:01
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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/
Mit Zitat antworten
  #5 (permalink)  
Alt 20.09.2011, 17:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2010
Beiträge: 52
DavidNF befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hemfrie Beitrag anzeigen
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!

Geändert von DavidNF (20.09.2011 um 17:25 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 20.09.2011, 18:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2010
Beiträge: 52
DavidNF befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von DavidNF (20.09.2011 um 18:14 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 20.09.2011, 18:14
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

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...
Mit Zitat antworten
  #8 (permalink)  
Alt 20.09.2011, 18:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2010
Beiträge: 52
DavidNF befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von zeji Beitrag anzeigen
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 22.09.2011, 12:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2010
Beiträge: 52
DavidNF befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von DavidNF Beitrag anzeigen
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...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.09.2011, 13:55
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
element richtig ansprechen mit jquery Schokokrapfen Javascript & Ajax 14 20.09.2011 12:28
jQuery DropDown select auswählen Jure Javascript & Ajax 3 24.11.2010 09:32
Jquery toggle() Problem mit children element Niels85 Javascript & Ajax 0 22.11.2010 18:47
JQuery: .load() parent Element entfernen Plumpy Javascript & Ajax 0 02.03.2010 16:41
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) NEOX Offtopic 10 17.07.2008 18:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:03 Uhr.