Images ne seront pas montrer après avoir effacé le contenu

Question

Je suis un débutant en utilisant jquery et js soit, alors peut-être que c'est la raison pour laquelle je ne peux pas undesrand pourquoi mon code ne fonctionne pas.

J'ai créé cette fonction createList pour pousser le contenu de l'image dans l'élément div. (Cette partie fonctionne bien) Donc ce que je veux faire est de créer un élément qui contient chaque image et après avoir supprimé le contenu de l'élément qui contiendra ce "porte-image", le code l'insère. Mais! Je le fais comme ça, mon résultat est rien:

var createList = function(){ 
       var imgList = $("<div />").attr({'id': 'imgs'}); 
       $.getJSON("<?php echo base_url().'gallery/json/'.$this->uri->segment(3); ?>",function(data){ 
        $.each(data, function(i,item){ 
         var rowContent = $("<img/>").attr({"src": item.src, "style": "width: 130px; padding: 10px;"}); 
         rowContent.appendTo("#imgs"); 
        }); 
        $('#s20').html(''); 
        imgList.css({"visibility": "visible", "height": "auto"}).appendTo('#s20'); 
       }); 
      } 

Alors, quel est le problème, comment pourrais-je faire mieux? Aucune suggestion?

Answer 1

Vous n'avez pas encore ajouté le imgList au DOM, vous ne pouvez donc pas le sélectionner avec un sélecteur #imgs. Vous pouvez cependant utiliser directement votre variable imgList.

Cette ligne:

rowContent.appendTo("#imgs"); // Fails because #imgs is not yet part of the DOM 

devrait être:

rowContent.appendTo(imgList); // Use existing reference to the element