[jQuery] toggle eines BESTIMMTEN Geschwisterlements

[normdew]

Hallo,

Ich bin blutiger Anfänger mit jQuery.

Ich habe mir da folgende funktion zusammengereimt:

$(document).ready(function(){
   $(".clickme").click(function(){ 
      $(this).next(".showme").slideToggle("fast");
   });
});

Meine HTML Struktur sieht nun so aus:

<div class="clickme"></div>
<div></div>
<div class="showme"></div>

Mit .next("showme") mach ich doch irgendwas falsch, soviel steht glaube ich fest!
Wie spreche ich ein ganz bestimmtes Geschwisterelement an, dass sliden soll?

 

[MyBad]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

$(".clickme").click(function(){ 
    $(".showme").slideToggle("fast");
});

So ist der Code ausreichend. Mehr braucht es dafür nicht.

 

[Myhar]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Das ist ausrechend, wenn alle showmes getoggled werden sollen.
Möchtest du nur eines toggeln:
.next() ist wirklich nur das nächste Element. In deinem Fall also das div. Möchtest du das .showme zwei .next() weiter haben, musst du next auch zweimal aufrufen. Komischer Satz, aber ich hoffe, es ist klar, was gemeint ist.

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

@MyBad: Genau ich will ja nicht alle Klassen showme auf der Seite toggleSliden sondern nur ein bestimmtes in Unmittelbarer Nähe.

Das Beispiel von Myhar kommt meinem speziellen Fall zwar näher, weil es tatsächlich derzeit immer 2 Elemente entfernt ist. Aber was mache ich in dem Fall dass es mal noch mehr sind?

Natürlich wäre mir ein generell tauglicher Code am liebsten, wenn sowas geht!

Hab es prinzipiell verstanden: @Myhar!
Sieht die Syntax in so einem Fall dann so aus?

$(".clickme").click(function(){
   $(this).next.next(".showme").slideToggle("fast");
});

 

[MyBad]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Du könntest deine Markup etwas mehr verschachteln:

<div class="wrapper">
  <div class="clickme">KLICK</div>
  <div class="showme"></div>
</div>

Das JS dann dazu:

$('.clickme').click(function(){
  $(this).parent().find('.showme').slideToggle('fast');
});

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Du könntest deine Markup etwas mehr verschachteln:

<div class="wrapper">
  <div class="clickme">KLICK</div>
  <div class="showme"></div>
</div>

Das ändert doch nichts daran, dass sich zwischen dem cklickme-DIV und dem showme-DIV noch andere Container befinden.

Im Übrigen ist mein Markup bereits in einer solchen Form gegliedert.

[EDIT]
Das Javascript hast du nachträglich eingefügt. Ohne das hatte dein Beitrag nicht viel Sinn für mich gemacht.

 

[MyBad]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Ja, hatte ich editiert. Hatte ausversehen schon abgeschickt, bevor ich mit schreiben fertig war.

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Also ich spreche jetzt nicht vom Syntaxfehler in Zeile 1 ^^ (Da fehlt die geschlossene Klammer):

Es funktioniert nicht! hört sich aber logisch an, das ganze übers parent-Element aufzuziehen.

 

[MyBad]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Sorry, schreibe hier nur nebenbei mal.

Funktionieren muss es. Setze den selben Code in einem meiner Projekte so ein. Ich check das eben noch einmal gegen und editiere das Ergebnis hier rein.

Edit: Doch, bis auf die Klammer, die ich vergessen hatte, ist der Code korrekt und sollte auch so funktionieren.

Nutzt du Firebug? Wenn ja, was für eine Fehlermeldung haut dieser denn raus?

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

mit dem script debugger von Firebug hab ich noch nicht soviele Erfahrungen.

Er springt beim "nächsten anhalten" immer in meine jquery.js rein. irgendwas undefined.

Ich habe die Version 1.7.2

 

[MyBad]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Poste doch mal bitte deinen aktuellen Code. Oder kann man sich dein Projekt eventuell schon irgendwo online anschauen? Das macht es einfacher den Fehler zu finden.

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Ähm, interessanter Weise hat es jetzt funktioniert, aber erst nachdem ich das jQuery wieder zurück in die $(document).ready(function() { ... }); gepackt habe:

$(document).ready(function(){
    $(".clickme").click(function(){
        $(this).parent().find(".showme").slideToggle("fast");
    }); 
});

 

[exo]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Ja das Document.ready ist schon wichtig, da dort erst die selectoren greifen, wenn das dokument auch fertig geladen wurde. Entweder per Doc-Ready oder du müsstest deinen Code ganz am ende setzen, da zur laufzeit es sonst sein könnte, dass noch nicht alle DOM-Elemente geladen wurden.

Und zum thema des selectors next - das Problem hatte ich auch schon des öfteren, es liegt einfach daran, dass du ja ein gewissen bereich selektierst (clickme) und wenn sich das element showme nicht innerhalb von clickme befindet (was oft der fall ist) musst du zwingend eine ebene zurück gehen (wie hier schon richtig gemacht mit parent).

Wenn ich nicht weis, ob in meinem ersten selektor das gewünschte element dabei ist, lass ich mir das meistens mal in der Console ausgeben um zu Prüfen

als beispiel:

$(".clickme").click(function(){ 
        console.log($(this));
    });

Wenn dann das gesuchte Element nicht mit ausgegeben wird, bzw. du es in dem Teil des DOMs nicht findest, weist du auch, dass du eine Ebene zurück musst.

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Danke Dir MyBad für deine Hilfe, und auch Myhar und exo.
Hab dadurch wieder echt ne Menge gelernt!

 

[mindraper]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

hi

wäre das nicht einfacher gewesen, wenn man dem zu slidenden element ein id-attribut verpasst hätte (sofern kein driftiger grund dagegen spricht)?

gruß

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Vergebe ich IDs nicht aber nur einmal? Wenn ich also mehrere Slide-Sektionen habe und unterschiedliche Bereiche, die ich anklicke um am jeweiligen Ort Zusatzinformationen sliden zu lassen - dann kommt es mir so vor als wenn ich mit einer allgemeingültigen ID falsch bin.

Kannst du mir das vielleicht visualisieren?

 

[MyBad]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Ich vermute er meint, dass du für jeden Bereich eine ID vergeben solltest. Wäre eine Möglichkeit. Dann könntest du dir den wrapper sparen, müsstest dem Script aber jedes mal die passende ID mitgeben.

Ich finde es mit dem wrapper komfortabler. Aber wie immer führen auch hier viele Wege nach Rom.

 

[normdew]

AW: [jQuery] toggle eines BESTIMMTEN Geschwisterlements

Ich finde die variante mit wrapper auch besser, da dieser nicht nur wegen des scripts allein da ist, sondern bei mir rein strukturell im Markup vorhanden sein muss (was man hier jetzt nicht sehen konnte). Aber danke auch dir mindraper.