nicht angemeldet
Hallo,
echo"<span id='loeschen_click' title='Del' class='ui-icon ui-icon-close'></span>\n";
IDs sind dokumentweit eindeutig, d.h. du kannst nicht mehreren Elementen in einer Schleife dieselbe ID geben. Arbeite hier mit Klassen.
Du kannst hier zwar wie vorgeschlagen eindeutige IDs mit fortlaufenden Nummern generieren. Aber Logik muss so allgemein sein, dass sie unabhängig von konkreten IDs funktioniert. IDs/Nummern zur Zuordnung der Daten sind nicht nötig. Sie sind ja bereits durch das DOM gruppiert:
<li>
<h2>Diese Daten will ich auslesen</h2>
<button>Von diesem Button gehe ich aus</button>
</li>
hab nur keine Ahnung, wie ich das in die Funktion einbaue und ob's so gehen könnte.
jQuery bietet Funktionen, um sich im DOM-Baum zu bewegen (DOM-Traversal). Ausgehend von dem geklickten Button hangelst du dich nach oben und suchst dann das zugehörige Element, das die benötigten Informationen enthält.
Beispiel: http://jsfiddle.net/molily/c8tNS/
Bei der Gelegenheit ist es auch sinnvoll, das click-Ereignis an einem gemeinsamen Elternelement abzufangen, anstatt bei jedem Button einzeln (Event Delegation). Dazu gibt es in jQuery die on-Methode mit drei Parametern:
$(document).on('click', '.löschen-button', löschen);
Das überwacht alle Klicks auf Elemente der Klasse »löschen-button« beim obersten document-Knoten. »löschen« ist die Variable, in der die Handler-Funktion gespeichert ist.
Im Event-Handler:
var title = $(event.currentTarget).closest('li').find('h2').text();
$(event.currentTarget) greift auf das geklickte Element zu (siehe currentTarget) und liefert ein jQuery-Objekt.
Davon ausgehend suchst du das nächste Elternelement vom Typ p (siehe closest) und suchst in den Kindelementen nach einem h2-Element (siehe find). Darin steckt die gewünschte Information.
Es ginge auch einfacher, je nachdem, wie der DOM-Baum aussieht. Z.B. mit siblings, wenn die beteiligten Elemente Geschwister sind. Aber es ist sinnvoll, diese Logik eher flexibel zu halten, damit das DOM änderbar ist. (In dem Zusammenhang könnte man auch auf Typselektoren verzichten und mit aussagekräftigen Klassen arbeiten.)
Die nächste Zeile kopiert den Titel in den Overlay zur Bestätigung und blendet den Overlay ein:
$('#löschen-overlay').find('.title').text(title).end().removeClass('hidden');
Hier ist nur end() neu, was einem das Ergebnis der vorherigen Suchoperation zurückgibt, hier $('#löschen-overlay'). Das ist fortgeschrittene Verkettung (Chaining) von jQuery-Methodenaufrufen, so kann man sehr effektiven Code schreiben.
Man kann auch ausführlicher schreiben:
var overlay = $('#löschen-overlay');
overlay.find('.title').text(title).end();
overlay.removeClass('hidden');
Grüße,
Mathias