jQuery - Właściwy sposób na dodanie elementu podrzędnego?

Question

To jest mój pierwszy dzień jQuery, więc proszę o mnie. Obecnie dodaję element do mojego kontenera nadrzędnego, wykonując następujące czynności:

var uploadedContainer =$('#uploadedimages'); 
var uploadedItem = '<div><span>'+file.name 
       + '</span><span><a class="mylink" href=remove.aspx?img=' 
       + safeUrl+'>Remove</a></span></div>'; 
uploadedContainer.append(uploadedItem); 

Chociaż to działa, nie jestem pewien, czy to właściwa droga do realizacji tego zadania. Czy możliwe jest dodanie elementu do elementu nadrzędnego i zanikanie elementu potomnego? Przykład użycia będzie świetny!

Answer 1

Jeśli zamierzasz dodawać podobne elementy w kółko, uniknę długich łańcuchów w kodzie. Utrzymują ból i tworzą trudny do odczytania kod. Chciałbym zamiast zachęcać do korzystania z narzędzia szablonów jak Handlebars:

<script type="text/x-handlebars-template" id="tmpl"> 
    <div> 
     <span>{{filename}}</span> 
     <span><a href="remove.aspx?image={{safeUrl}}">Remove</a></span> 
    </div> 
</script> 

Teraz budujemy skompilowany szablon z powyższym:

var template = Handlebars.compile($("#tmpl").html()); 

Pozostaje teraz jest, aby wywołać funkcję template z naszych przedmiotem danych dodać powstałego znaczników naszego pojemnika (lub jednostki) i zanikać to.

var data = { 
    filename: "foo.png", 
    safeUrl: encodeURIComponent("foo image") 
}; 

$("body").append(template(data)).fadeIn(); 

w rezultacie środowiska i bardziej czytelne CO de to będzie miało sens i będzie łatwe do utrzymania.

Demo online: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

Answer 2

Ten kod powinien działać. Możesz dodać ten kod zanikać coś:

$('#uploadedimages').fadeIn('slow', function() { 
    // Animation complete 
    }); 

musisz ustawić widoczność uploadedimages do ukrytych za to do pracy.

Dokumentacja JQuery jest bardzo dobra. Proponuję odwiedzić stronę JQuery site.

Oto link dla Ciebie dotyczące blaknięcie coś.

Answer 3

var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>'; 

Należy unikać zawiesi HTML wraz z ciągami znaków takich jak ta. Co się stanie, jeśli znak file.name lub ma znak? W najlepszym przypadku generujesz nieprawidłowy kod HTML, w najgorszym przypadku właśnie opuściłeś lukę bezpieczeństwa z obsługą skryptów krzyżowych w aplikacji.

Ponadto nie ma kodowania encodeURIComponent na safeUrl (chyba że już to zrobiłeś). Trzeba by to zrobić również dla niezawodności. Istnieje również wiele innych znaków, które mogą zepsuć się z safeUrl ze względu na brakujące cytaty w atrybucie href.

Lepiej: użyj metody text(), aby ustawić zawartość tekstową elementu, a attr(), aby ustawić atrybut na wartość. Wtedy nie musisz się martwić o ucieczkę HTML. np .:

var div= $('<div><span></span><span><a class="mylink">Remove</a></div>'); 
div.find('span').eq(0).text(file.name); 
div.find('span').eq(1).attr('href', 'remove.aspx?img='+encodeURIComponent(url)); 
div.appendTo('#uploadedimages');