Comment travailler avec les divs ajoutées?

Question

Je suis un débutant massif à jquery alors s'il vous plaît excuser mon manque de connaissances, comment puis-je faire quelque chose avec les éléments que j'ai ajouté ici? par exemple, je veux que tout sauf le premier '.larger' soit caché lorsque ces éléments sont ajoutés. Merci.

function loadXML() 
{ 
    $.ajax({ 
      type: "GET", 
      url: XML_PATH, 
      dataType: "xml", 
      success: function(xml){ 
       $(xml).find('item').each(function(){ 
        var id = $(this).attr('id'); 
        var images = $(this).find('large').text(); 
        var thumbs = $(this).find('thumb').text(); 
        var descs = $(this).find('description').text(); 
        $('<div class="thumber" id="thumb_'+id+'" rel="large_'+id+'" style="background-image: url('+thumbs+')"></div>').appendTo('#thumbslide'); 
        $('<div class="larger" id="large_'+id+'" style="background-image: url('+images+')"></div>').appendTo('#view'); 
       }); 
    }); 

Answer 1

La fonction de rappel de la méthode .each() a en fait deux params, l'indice actuel et l'élément dom actuel:

.each(function(index, element)) 

Vous pouvez le faire lors de la création de l'élément:

$('<div class="larger" id="large_'+id+'" style="background-image: url('+images+')"></div>') 
// apply css 'block' for first item, otherwise 'none' to hide 
.css('display', index === 0 ? 'block' : 'none') 
.appendTo('#view') 

Answer 2

Voici le code qui cache tous les éléments ".larger" sauf le premier:

$(".larger").not(":first").hide(); 

Answer 3

Tout d'abord, il est inutile de faire $ (this) 4 fois. vous ralentissez votre code en faisant cela. Il serait plus efficace de stocker/mettre en cache cela.

var $this = $(this);

Pour faire ce que vous voulez, vous pouvez faire quelque chose comme ça ...

$.ajax({ 
     type: "GET", 
     url: XML_PATH, 
     dataType: "xml", 
     success: function(xml){ 
      var first = true; 
      $(xml).find('item').each(function(){ 
       var $this = $(this); 
       var id = $this.attr('id'); 
       var images = $this.find('large').text(); 
       var thumbs = $this.find('thumb').text(); 
       var descs = $this.find('description').text(); 
       $('<div class="thumber" id="thumb_'+id+'" rel="large_'+id+'" style="background-image: url('+thumbs+')"></div>').appendTo('#thumbslide').toggle(!first); 
       $('<div class="larger" id="large_'+id+'" style="background-image: url('+images+')"></div>').appendTo('#view').toggle(!first); 
       first = false; 
      }); 
}); 

Avec jQuery vous pouvez tout simplement continuer à des opérations de la chaîne.