要素のリストを配列に変換する

Question

配列（スクリプト）から画像を読み込むギャラリープラグインを使用しようとしています。

これに

<div id="gallery2"> 
    <img src="image01.jpg" title="Title Image 1"> 
    <img src="image02.jpg" title="Title Image 2"> 
    <img src="image03.jpg" title="Title Image 3"> 
    <img src="image04.jpg" title="Title Image 4"> 
    <img src="image05.jpg" title="Title Image 5"> 
    <img src="image06.jpg" title="Title Image 6"> 
</div> 

：私は、次のような、コンテナ内の要素のリストからこの配列を生成したい

arr = [ 
    {src: 'image01.jpg', caption: 'Title Image 1'}, 
    {src: 'image02.jpg', caption: 'Title Image 2'}, 
    {src: 'image03.jpg', caption: 'Title Image 3'}, 
    {src: 'image04.jpg', caption: 'Title Image 4'}, 
    {src: 'image05.jpg', caption: 'Title Image 5'}, 
    {src: 'image06.jpg', caption: 'Title Image 6'} 
] 

私はこっちに見つかったいくつかの例をしようとしますが、でてきました運がない。私は私の結果の配列が適切な "JavaScript配列"ではないと思うので、うまくいきません。何らかの理由で、画像のこの配列をロードする機能を

{ src:'image01.jpg',caption: 'Title Image 1'}, 
{ src:'image02.jpg',caption: 'Title Image 2'}, 
{ src:'image03.jpg',caption: 'Title Image 3'}, 
{ src:'image04.jpg',caption: 'Title Image 4'}, 
{ src:'image05.jpg',caption: 'Title Image 5'}, 
{ src:'image06.jpg',caption: 'Title Image 6'} 

これまでのところ、それは私が必要とする形式を持つ配列シームが、：その結果

var arr = []; 
$('#gallery2 img').each(function (index, element) { 
    arr[arr.length] = "{ src:'" + $(this).attr('src') + "'"; 
    arr[arr.length] = "caption: '" + $(this).attr('title') + "'}"; 
}); 
arr = (arr.join(',')); 

は：私はこのコードを使用しています正しく動作していません。結果は次のとおりです。

<img src="{ src:'image01.jpg',caption: 'Title Image 1'},{ src:'image02.jpg',caption: 'Title Image 2'},{ src:'image03.jpg',caption: 'Title Image 3'}" alt="" title=""> ...and so on. 

いずれかの提案がありますか？

多くの感謝！

Answer 1

あなたは配列を返すmap()とget()を使用することができます。

var data = $('#gallery2 img').map(function() { 
 
    return {src: $(this).attr('src'), caption: $(this).attr('title')} 
 
}).get(); 
 

 
console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gallery2"> 
 
    <img src="image01.jpg" title="Title Image 1"> 
 
    <img src="image02.jpg" title="Title Image 2"> 
 
    <img src="image03.jpg" title="Title Image 3"> 
 
    <img src="image04.jpg" title="Title Image 4"> 
 
    <img src="image05.jpg" title="Title Image 5"> 
 
    <img src="image06.jpg" title="Title Image 6"> 
 
</div>

Answer 2

はこれを試してみてください。

var arr = []; 
$('#gallery2 img').each(function (index, element) { 
    var tempObject = {}; 
    tempObject.src = $(this).attr('src'); 
    tempObject.caption = $(this).attr('title'); 
    arr.push(tempObject); 
}); 

Answer 3

var arr = []; 
$('#gallery2 img').each(function (index, element) { 
    var el = {}; 
    el.src = $(this).attr('src'); 
    el.title = $(this).attr('title'); 
    arr.push(el); 
}); 

あなたの実装では、必要なjavascriptオブジェクトの表現を複製しようとしているので、文字列になります。このようにして、javascriptオブジェクトの実際の配列を構築します。