JQuery-Frage zu DOM-Navigation/Manipulation

[ezekiel23]

Hallo,
habe folgendes Problem:
ich erstelle dynamisch mit JQuery auf knopfdruck ein DIV (als Knoten genau vor den Knopf) und in dieses Div soll auch automatisch ein Textnode eingefügt werden. Allerdings schaffe ich es nicht den automatisch erstellen DIV anzusprechen um den Textnode mit .append() dranzuhängen.
So erstelle ich den DIV:

$(document).ready(function() {
    $('.foo').live("click",(function(){ 
        $(this).before("<div class='meine_klasse'></div>");

Der DIV wird davor angehängt. Nur wie komme ich gleich im nächsten Schritt an das DIV heran?
So gehts nicht:

$(this).parent().append("<div class='meine_klasse'></div>");

Weil ist ja nicht das parent, sondern einfach nur ein Knoten direkt darüber. Bräuchte also soetwas (jetzt werden alle jquery-profis die haare raufen) wie:

$(this).before().append("<div class='meine_klasse'></div>");

Wer hat ne Lösung? Bin noch jQuery A-A-AAAAnfänger..

 

[sokie]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

Bräuchte also soetwas (jetzt werden alle jquery-profis die haare raufen) wie:
Code:
$(this).before().append("<div class='meine_klasse'></div>");
Wer hat ne ? Bin noch jQuery A-A-AAAAnfänger..

ist doch gar nicht so abwegig. eine Funktion wie before() stellt jQuery ja zur verfügung (übrigens in der Dokumentation im Bereich Manipulation findest du all das mit Erklärungen Manipulation – jQuery API)

before ist bereits darauf ausgelegt inhalte einzufügen, ein "append" brauchst du da nicht:

$(this).before("<div class='meine_klasse'></div>");

 

[ezekiel23]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

Hi Sokie,
ein DIV so zu erstellen ist mir gelungen. Aber wenn ich nun genau daran noch ein <span> bspw. hängen möchte, wie spreche ich in der nächsten Zeile dieses eben erzeugte DIV an um dieses <span> dranzuhängen?

 

[sokie]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

soll nach dem eben erzeugten div noch ein span eingefügt werden?
dann nochmal $(this).before("<span></span>");
um auf das vorangegangene div als node zuzugreifen kannst du zB mit den traversing methoden (zB prev() ) arbeiten http://api.jquery.com/category/traversing/

 

[ezekiel23]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

Das würde auch funktionieren, nur dieses <span> soll ein Kind-Element des DIVs werden, quasi so am Ende:

<div><span></span></div>

Was ich erreiche ist immer nur das:

<div></div><span></span>

Das auch deinem Beispiel widerspiegelt. Hast du ne Idee wie ich dieses <span> dem <div> als Kindknoten anhängen kann?
Also theoretisch so:

 $(this).before().append("<span></span>")

, sprich, hänge dem Element davor (ist ja nun mein neues DIV) ein span dran. So gehts nur leider nicht..

 

[SineTempore]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

an der stelle wo du das div generierst einfach statt

$(this).before("<div class='meine_klasse'></div>");

$(this).before("<div class='meine_klasse'><span></span></div>");

das war doch das was du gemeint hast oder?

 

[saila]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

Hi,

du hast dem neue DIV eine class anstatt id mitgegeben? Ansonsten wäre es simple:

$('#neueId').html('<span>text</span>');

oder du generierst direkt DIV mit SPAN. Allerdings würde ich zuvor noch prüfen, ob das neue DIV-Element eingehängt ist, da jeder Brwoser seine Besonderheiten hat. Mal ist er in FF sehr schnell und in IE6/7 wiederum schleppend, bis das DIV erzeugt wurde.

 

[sokie]

AW: JQuery-Frage zu DOM-Navigation/Manipulation

Das würde auch funktionieren, nur dieses <span> soll ein Kind-Element des DIVs werden, quasi so am Ende:

<div><span></span></div>

deswgen doch der Hinweis auf prev() und die traversing methoden. Vielleicht einfach mal lesen was da alles geht.
also, wenn du den <div> mit der methode before() eingefügt hast, kannst du mit $(this).prev() darauf zugreifen, und mit html("<span>mein neuer Span</span>") dein element da hinein setzen.

$(this).prev().html("<span>mein neuer Span</span>)";

(oder wie vn Sine Tempore vorgeschlagen das ganze html auf einmal in der before() Zeile reinschreiben)