[jQuery] "Lees meer"

[Altaphista]

Ik heb een x-aantal nieuws items waarvoor ik de te lange tekst wil afkappen en met 'Lees meer' de rest wil laten zien.
Nu werkt het volgende op ALLE "meer"-classes ipv alleen de betreffende, dus op een willekeurigen "Lees meer" klikken klapt alles uit of in hoe fix ik dit dat alleen de tekst van de meer-span uitklapt van die waar je op klikt?
Heb het al wel met mootools voor elkaar gekregen, maar zie niet hoe ik dit voor elkaar kan krijgen met classes in jQuery, het lijkt zo simpel te moeten kunnen...

HTML:

<div class="tekst">Lorem ipsum dolor sit 
  <span class="meer">amet, consectetur adipisicing elit, sed do eiusmod</span>
  <a href="#" class="leesmeer">lees meer</a>
</div>
<div class="tekst">Lorem ipsum dolor sit 
  <span class="meer">amet, consectetur adipisicing elit, sed do eiusmod</span>
  <a href="#" class="leesmeer">lees meer</a>
</div><div class="tekst">Lorem ipsum dolor sit 
  <span class="meer">amet, consectetur adipisicing elit, sed do eiusmod</span>
  <a href="#" class="leesmeer">lees meer</a>
</div>

JavaScript:

$(document).ready(function() {
    $('div.tekst > span.meer').hide();
    
    $('div.tekst > a.leesmeer').click(function() {
        $('span.meer').toggle(400);
        return false;
  });
});

[Noork]

Kun je niet het ID van het element in de functie zetten?

[Altaphista]

ik wil het zonder id's doen (met id's is het erg simpel ), anders worden het lange functies in de js. En het kunnen veel nieuwsitems worden. Het frustreert me dat het met MooTools wel al is gelukt en met jQuery nog niet, ik zie het zo snel niet

[ Voor 26% gewijzigd door Altaphista op 26-05-2009 15:46 ]

[Lordsauron]

je heb tog de $(This)? weet het zo even niet uit me hooft maar je heb de this van de link die zit binnen je div bevind.. op die manier kan je iets met parrent en dan children doen..

[ Voor 78% gewijzigd door Lordsauron op 26-05-2009 15:48 ]

[--MeAngry--]

Hoe moet jouw "click" event weten welk item hij precies open en dicht moet klappen? Als je dat item nu eens opvraagt. Ik vermoed dat je jouw click functie nog wel een of ander element mee kan geven. Even de Event handleiding van jQuery() goed doornemen dus.

[Saeverix]

Met gebruik van $(this) zou je een heel eind moeten komen...

[Verwijderd]

Wat denk je van werken met this? Dus een onclick in ja A tag met een this referentie erin naar een functie die de jQuery fixt.

Edit:

Spuit 11x2

[ Voor 8% gewijzigd door Verwijderd op 26-05-2009 15:49 ]

[Altaphista]

Lordsauron schreef op dinsdag 26 mei 2009 @ 15:47:
je heb tog de $(This)? weet het zo even niet uit me hooft maar je heb de this van de link die zit binnen je div bevind.. op die manier kan je iets met parrent en dan children doen..

Saeverix schreef op dinsdag 26 mei 2009 @ 15:48:
Met gebruik van $(this) zou je een heel eind moeten komen...

ja dan klapt ie "lees meer" in en uit, tenminste dan verdwijnt ie. Had ik al geprobeerd.

[BtM909]

Ipv $('span.meer').toggle(400); moet je de previous node met span.meer pakken

http://docs.jquery.com/Traversing

[ Voor 18% gewijzigd door BtM909 op 26-05-2009 15:51 ]

[Lordsauron]

Altaphista schreef op dinsdag 26 mei 2009 @ 15:49:
[...]


[...]

ja dan klapt ie "lees meer" in en uit, tenminste dan verdwijnt ie. Had ik al geprobeerd.

Ja dat is als je idd de This gebruikt.. maar zoals ik zij.. http://www.google.nl/sear...+.parent.Children&spell=1 hier moet wat te vinden zijn

[Joolee]

code:

    $('div.tekst > a.leesmeer').click(function() {
        $('span.meer').toggle(400);
        return false;
  });

Je roept in de onclick functie alle spans op met class meer. JQuery doet dus precies wat je vraagt

Wat je zoekt is waarschijnlijk zoiets:

code:

    $('div.tekst > a.leesmeer').click(function() {
        $(this).siblings('span.meer').toggle(400);
        return false;
  });

//Edit: Spuit 111

[Saeverix]

Altaphista schreef op dinsdag 26 mei 2009 @ 15:49:
[...]


[...]

ja dan klapt ie "lees meer" in en uit, tenminste dan verdwijnt ie. Had ik al geprobeerd.

Goed lezen he. Lordsauron gaf al iets meer hints als mij. Het is een stap richting een oplossing. Mooiste is als je het met behulp van tips zelf ontdekt.

[Altaphista]

Lordsauron schreef op dinsdag 26 mei 2009 @ 15:51:
[...]

Ja dat is als je idd de This gebruikt.. maar zoals ik zij.. http://www.google.nl/sear...+.parent.Children&spell=1 hier moet wat te vinden zijn

met child ( $("tekst > meer"). etc) had ik ook al geprobeerd maar niet verder gekomen want dan ging ie ook weer alle children pakken. Bij de api onder hierarchy staat bij child ook sibling. Icm met this heb ik m nu werkend.

edit: @jolee idd zo dus

edit2: ben iig door het mootools-manier van implementeren op de verkeerde been gezet. Daar werkt het zo dat je voor each van een class bijv een onclick functie kan implementeren die bijv in dat element iets doet. Maar dank!

[ Voor 17% gewijzigd door Altaphista op 26-05-2009 16:02 ]

[vriesdude]

Een combinatie van $(this) en prev() is voldoende voor wat jij wilt bereiken.

prev() vraagt het vorige dom element op vanaf $(this)
$(this) is het element waarop de gebruiker heeft geklikt in dit geval

JavaScript:

$(document).ready(function() {
    $('div.tekst > span.meer').hide();
    
    $('div.tekst > a.leesmeer').click(function() {
        $(this).prev().toggle(400);
        return false;
  });
});