[JavaScript] jquery append + zugriff auf erstelltes element

encud · 28. Januar 2011

jquery append + zugriff auf erstelltes element

Hallo Zusammen!

Ich lasse mir per PHP ein HTML-Schnipsel erstellen, welchen ich dann per AJAX auf der Website einbinde.
Der HTML-Schnipsel hat im Elternelement eine ID, die von PHP dynamisch erstellt wird. Die ID ist mir also unbekannt.
Gibt es da irgendeine Möglichkeit an die ID von dem Element ranzukommen? (Will, wenn schon ein Element mit der selben ID besteht, die beiden tauschen.)

Im Moment sieht es etwa so aus:

HTML:

$('Element1').click(function(){
 $.ajax({
 url: 'URL',
 data: {
 data: $(this).attr('data')
 },
 success: function(data){
 $('Element2').prepend(data);
 }
 });
});

Dieses JS erstellt jetzt nur das neue Element aber prüft nicht, ob schon eins existiert mit welchem er das neue ersetzen kann.

Wenn mir wer helfen kann, wäre das echt super. Anderenfalls muss ich wohl mein gesamtes Script nochmal überarbeiten

Gruß encud

Anzeige

Murdoc · 28. Januar 2011

AW: jquery append + zugriff auf erstelltes element

ja das geht.

prototype-code:

Code:

var tmp = (new Element('div')).insert(data);
data = tmp.childElements()[0];

// element wieder entfernen
tmp.removeChild(data);
tmp = null;

// data ist nun gerendert
alert(data.id);

encud · 28. Januar 2011

AW: jquery append + zugriff auf erstelltes element

ich bin jetzt kein prototype-experte, aber wenn ich das gerade richtig verstehe, haust du das neue element erst ins html, liest dann die daten aus und löscht dann das bestehende, oder?
Das Problem wäre dann, dass es ganz oben in der liste stehen würde, aber nicht das bestehende ersetzt...

Falls ich da jetzt falsch verstanden habe, wäre es möglich das nochmal etwas genauer zu erklären? hab von prototype echt 0 plan

Murdoc · 28. Januar 2011

AW: jquery append + zugriff auf erstelltes element

hier komplett ohne prototype oder sonstigem framework:

HTML:

<!DOCTYPE html>
<html>
 <head>
 <title>...</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 <script type="text/javascript">
 // <![CDATA[
 String.prototype.renderHtml = function()
 {
 var tmp = document.createElement("div");
 tmp.innerHTML = this.replace(/^\s+/, '');
 
 // element auslesen und entfernen
 var res = tmp.firstChild;
 tmp.removeChild(res);
 tmp = null;
 
 return res;
 };

 var code = '<div id="foo"><p>hallo welt</p></div>';
 alert(code.renderHtml().getAttribute("id")); // foo
 
 // ]]>
 </script>
 </body>
</html>

wenn du aber elemente verarbeiten willst wie "<li>" oder "<td>" (also keine toplevel elemente) musst du versuchen über nen regex an die id zu kommen, da das ken valides html ist und nicht korrekt verarbeitet werden kann.

wollknoll · 28. Januar 2011

AW: jquery append + zugriff auf erstelltes element

kannst du nicht etwas in der richtung machen (nur falls data dein html code ist)

Code:

var $element = $("#" + $(data).attr('id'));
if($element) {
 $element.html($(data).html());
} else {
 // da wo du das element hinhaben möchtest
}

PS: habe das nicht getestet, aber vom prinzip sollte es funktionieren.

encud · 29. Januar 2011

AW: jquery append + zugriff auf erstelltes element

juhu, done
der code von Murdoc hat mich auf die richtige spur gebracht (auch wenn ich ihn nicht ganz verstanden habe ).

sieht jetzt etwa so aus:

HTML:

$('element').prepend(data);
var li = $('ul li:first-child');
var id = li.attr('id');
var count = $('ul li[id=' + id + ']').length;

if(count > 1)
{
 li.remove();
 $('ul li[id=' + id + ']').replaceWith(data);
}

Ich packe das neue element also erst rein, gucke dann ob es mehr davon gibt und wenn ja lösche ich das neue und ersetze das alte!
bei dem html-schnipsel handelt es sich um ein li welches in ein ul ggepackt werden soll, daher hier immer "ul li"
Danke für die Hilfe!

@wollknoll: also ich hab deine methode nicht ausprobiert, weil sie mich verwirrt hat.

Code:

$("#" + $(data).attr('id'));

Mir wäre nicht bekannt das man sowas mit jquery machen kann, aber verbesser mich wenn ich falsch liege
Bei data handelt es sich um etwas sowas:

HTML:

<li id="id"><span>Inhalt</span></li>

wollknoll · 30. Januar 2011

AW: jquery append + zugriff auf erstelltes element

wenn ich mal deine data in den Befehl einfüge und in der firebug console ausführe, erhalte ich folgendes:

Code:

var id = $('<li id="test"><span>Inhalt</span></li>').attr('id');
// id == test

im zweiten schritt suche ich nach einem element das die gleiche id hat, in deinem fall:

Code:

$("#" + id);
// bzw. wie du es gelöst hast:
$('ul li[id=' + id + ']');

und anstatt die id in eine variable zu schreiben, habe ich es direkt integriert, daher:

Code:

$("#" + $(data).attr('id'));

gruß

encud · 30. Januar 2011

AW: jquery append + zugriff auf erstelltes element

ahh cool, so ist es natürlich viel eleganter!
hab allerdings deine if-abfrage etwas angepasst, "if(element)" hat er nicht akzeptiert, hab dann ein element.length > 0 draus gemacht

danke für die Hilfe!

Nützliche Suchen

[JavaScript] jquery append + zugriff auf erstelltes element

Videos zum Themenbereich