追加されたdivを使用するにはどうすればよいですか？

Question

私はjqueryの大変な初心者ですので、私の知識の不足を言い訳してください。ここに追加した要素を使って何かをやっていくにはどうしたらいいですか？たとえば、これらの要素が追加されたときに最初の「大きい」部分を隠すようにしたいとします。ありがとう。

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

.each()メソッドのコールバック関数では、実際には2つのparams、現在のインデックスと現在のDOM要素を持っています

.each(function(index, element)) 

要素を作成するときは、それを行うことができます。

$('<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

最初の部分を除くすべての ".larger"要素を隠すコードは次のとおりです。

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

Answer 3

まず、$（これ）を4回実行することには意味がありません。あなたはそれを行うことによってあなたのコードを遅くしています。それを保存/キャッシュするほうが効率的です。 jQueryを使って

var $this = $(this);

あなたはこのような何かを行うことがやりたい...

$.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; 
      }); 
}); 

あなただけのチェーンオペレーションを継続することができます。