[solved] [jQuery] Kopiowanie DIVa

[solved] [jQuery] Kopiowanie DIVa

Virti Zobacz profil	5.07.2008, 11:01:10 Post #1
Grupa: Zarejestrowani Postów: 115 Pomógł: 12 Dołączył: 11.01.2005 Skąd: Zduńska Wola Ostrzeżenie: (0%)	W zasadzie nawet nie wiem jak mam nazwać ten temat. Przekazuję sobie dane poprzez JSON: Kod [{"id":"14","name":"4868a3b58af2f.jpg","title":"We were good together.","author":"Virti","position":"1" },{"id":"15","name":"4868a4ae2367d.jpg","title":"Just do it.","author":"Virti","position":"2"},{"id" :"16","name":"4868cc8e9546d.jpg","title":"Feel","author":"Virti","position":"3"},{"id":"17","name":"4868cdd086bb8 .jpg","title":"I saw an angel.","author":"Virti","position":"4"},{"id":"18","name":"4868cf2aca642.jpg" ,"title":"Dirty love.","author":"","position":"5"},{"id":"19","name":"4868cf7642b9e.jpg","title":"Would you like to come in?","author":"","position":"6"},{"id":"20","name":"4868cfbf89894.jpg","title":"Nobody knows what that\\\\\\'s mean.","author":"","position":"7"},{"id":"21","name":"4868cfd676766.jpg","title" :"Can I?","author":"Virti","position":"8"},{"id":"22","name":"4868cfeb89894.jpg","title":"Ouch! My nose !","author":"","position":"9"},{"id":"23","name":"4868d012423b5.jpg","title":"Going to the end.","author" :"Virti","position":"10"},{"id":"24","name":"486917ada193a.jpg","title":"Forgive me. Please.","author" :"","position":"11"},{"id":"25","name":"4869189e496a8.jpg","title":"And hope is gone.","author":"","position" :"12"}] Oraz kod HTML+JS: [HTML] pobierz, plaintext <script type="text/javascript"> <!-- $(document).ready(function(){ $.getJSON("image/list", function(json){ $.each(json, function(i, image){ $('.dragndropTemplate').clone(true). attr('id', i).appendTo('#dropZone'). fadeIn('slow'); $('#'+i+'>.dnd').attr('src', 'images/thumbs/'+image.name) .attr('id', 'img_'+i).attr('title', image.title).attr('alt', image.title); }); }); }); //--> </script> <h1>Zarządzaj!</h1> <p> <a href="image/add">Dodaj nowe zdjęcie.</a> </p> <!-- SZABLON --> <div class="dragndropTemplate"> <img class="dnd" src="" alt="" /> </div> <div id="dropZone"> </div> [HTML] pobierz, plaintext Problem polega na tym, że jquery tworzy tysiące kopii div.dragndropTemplate; po kilka razy z takimi samymi ID: [HTML] pobierz, plaintext <div id="0" class="dragndropTemplate" style="display: block;"> </div> <div id="1" class="dragndropTemplate" style="display: block;"> </div> <div id="1" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="2" class="dragndropTemplate" style="display: block;"> </div> <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> [HTML] pobierz, plaintext Zawartość divów wyciąłem, żeby kodu nie było za dużo. Pozatym to oczywiście nawet nie połowa tego, co wyświetla mi firebug w divie #dropZone. Wie ktoś, co może być przyczyną i jak to naprawić? Jestem absolutnie zielony z jQuery, czy jakiegokolwiek JavaScript. Z góry dzięki i pozdrawiam EDIT: Problem rozwiązany; Wystarczyło dodać przed appendTo('#dropZone') to: removeClass('dragndropTemplate') Ten post edytował Virti 5.07.2008, 14:53:57