Wählen Sie Tags innerhalb einer Zeichenfolge mit jQuery

Question

Ich habe meine Website einen Wert als Folge eines Ajax-Aufrufs erhalten. Danach möchte ich dieses Ergebnis (eine Zeichenkette) in ein Tag einfügen. Allerdings möchte ich dieses Ergebnis so einfügen, dass (1) es eine Opazität = 0 haben muss, dann (2) slideDown(), so dass die gesamte Inhaltsliste mit Animation nach unten geschoben wird und schließlich (3) die Deckkraft ändert = 1. Stellen Sie sich vor, dies ist wie eine Facebook-Nachrichtenliste einfügen Prozess

Die Art, wie ich dies tun möchte, ist die Ergebniszeichenfolge von AJAX zu Opazität = 0 zuerst. Ich weiß jedoch nicht, wie man mit jQuery ein Tag innerhalb einer Zeichenkette auswählt. Ich kenne jQuery nur aus dem DOM auswählen. Also, wie geht das? Irgendein Rat?

Dank

Answer 1

ausblenden() ist eine jQuery-Funktion, was bedeutet, dass nur auf einem Jquery-Objekt arbeitet, so müssen Sie zunächst die HTML im DOM, injizieren und dann verstecken() aufrufen, auf dem Element DOM.

$('#msgList').load (url,data,function(html){ 
var $this = $(this); // cache $(this) for performance 
$this.hide().html(html); // inject the html in the DOM 
$('#aa', $this).hide(); // hide #aa 
$this.show(); // reveal the messageList 
}); 

Answer 2

Im Folgenden wird der Ajax-Aufruf mit dem einfachen .get() -Wrapper erfolgen.

Dann lädt die Callback-Funktion die Antwort in ein jquery-Objekt und sucht das gewünschte Tag.

Es verbirgt dann dieses Tag und fügt es an einen div-Container an.

Schließlich wird es nach unten schieben.

//do ajax call 
$.get(url, function(html) { 

    //load html into a jQuery object, find the tag by id then hide it 
    var $el = $(html).filter('#someId').hide(); 
    //append element to the dom and slide it down 
    $el.appendTo('#someDiv').slideDown('slow'); 

}); 

Answer 3

Ich würde in Erwägung ziehen, den Rückgabewert in einen SPAN zu setzen. Verstecken Sie den Container, der ihn enthält. Setzen Sie die Deckkraft des SPAN auf 0, fügen Sie dann das Ergebnis hinzu und legen Sie es in den Container. Sobald dies erledigt ist, schieben Sie den Container nach unten und animieren Sie die Anzeige des Ergebnisses im Callback der slideDown-Methode.

$.ajax({ 
    ... 
    success: function(data) { 
     var container = $('#container').hide(); 
     $('<span />').css('opacity', 0) 
         .html(data.result) 
         .appendTo(container); 
     container.slideDown('normal', function() { 
         $(this).('span:first') 
           .animate({ 'opacity': 1.0 }); 
        }); 
    } 
    ... 
});