jQueryで配列全体を繰り返しません

Question

私は配列に必要なすべてのイメージを取得して$ imageに渡すことができます。しかし、私はその配列をループしようとすると、同じ項目を3回警告し続けます。

コードに問題があります。

getItem : function($image){ 
    console.log($image) 
    console.log(jQuery.type($image)) 
    var setup ='<img src="' + $($image).attr('href') + '" title="' + $($image).attr('title') + '"/>'; 

    $.each($image, function(i){ 
     alert(setup); 
    }); 

} 

HTML

<a href="images/slideshow/1-GW.PhillipBarnhart.ReverendMemory.jpg" title="Phillip Barnhart as: 
     Reverend Memory - a clergyman who stands for decorum and truth." rel="slideshow"><img src="images/view-slideshow.jpg" width="490" height="352" alt="View Slideshow"></a> 
     <a rel="slideshow" href="images/slideshow/2-GW.BethBrooks.POLLYTODD.jpg">fff</a> 
     <a rel="slideshow" href="images/slideshow/3-GW.NickHale.NOSTALGIA.jpg">test</a> 

スクリプト全体またはあなたjsFiddleのような場合は、こちらのリンクです。 http://jsfiddle.net/h3az4/

var slideShow = { 
config : { 
    wrapper : 'body', 
    container : 'div', 
    anchor : 'a[rel="slideshow"]' 
}, 

init : function(config) { 
    $.extend(slideShow.config, config); 
    $(slideShow.config.anchor).hide(); 
    $(slideShow.config.wrapper).find(slideShow.config.anchor) 
     .eq(0) 
     .show() 
     .click(function(e){ 
      e.preventDefault(); 
      slideShow.getItem($(slideShow.config.anchor)); 
     }); 
}, 

getItem : function($image){ 
    console.log($image) 
    console.log(jQuery.type($image)) 
    var setup ='<img src="' + $($image).attr('href') + '" title="' + $($image).attr('title') + '"/>'; 

    $.each($image, function(i){ 
     alert(setup); 
    }); 


}, 

createTumbnail : function($image){ 

} 

}; 


$(document).ready(function() { 
slideShow.init(); 
}); 

Answer 1

$ .eachループを間違って使用しています。

最初の問題は、$ image.attr（ "x"）は、$ imageがリストの場合、リストの最初の要素のattrを取得することです。あなたが欲しいのは、$（$ image [i]）かuseのどちらかです.get

2番目の問題は、ループ外でvar setupと宣言しています。これは、宣言され、3回ではなく3回使用されることを意味します（3つのアイテムがあるため）。

$.each($image, function(i){ 
    var setup ='<img src="' + $(this).attr('href') + '" title="' +  
     $(this).attr('title') + '"/>'; 
    alert(setup); 
}); 

機能であなたの$.eachを使用してthisオブジェクトが順番に配列内の各オブジェクトを参照します。この場合、thisはDOMオブジェクトなので、$(this)を使用してjQueryイメージオブジェクトを取得します。

取り組ん例えばここを見てhttp://jsfiddle.net/Raynos/h3az4/3/

Answer 2

私はあなたがそれをループしているので$imageが配列であると仮定します。そうであれば、これに似たものが欲しいです。

$.each($image, function(i){ 
    var setup ='<img src="' + i.attr('href') + '" title="' + i.attr('title') + '"/>'; 
    alert(setup); 
}); 

Answer 3

http://jsfiddle.net/h3az4/5/

で私の解決策を確認しDutchie432が

を指摘@としてIMOあなたはそれを少しovercomplicated、いくつかの概念的なエラーを作った、スライドショーの無限ループを可能にこれは、同様に役立ちます

希望、 トム

Answer 4

はあなたがmap()^(docs)を使って欲しいように見えるものを達成することができます。

getItem : function($image){ 
    $image.map(function(i,val){ 
     return $('<img src="' + this.href + '" title="' +this.title + '"/>')[0]; 
    }).appendTo(slideShow.config.wrapper); 
}, 

これは新しい<img>要素を含む新しいjQueryオブジェクトを作成し、その後、slideShow.config.wrapperセレクタをappendTo()^(docs)ます。

中間変数を必要とせず、変数はsetupです。プロパティを使用して

それとも、このような小さな進歩し、引数オブジェクト：

getItem : function($image){ 
    $image.map(function(i,val){ 
     return $('<img>', { src:this.href, title:this.title })[0]; 
    }).appendTo(slideShow.config.wrapper); 
},