如何使用jquery创建我的图像数组？

Question

我如何使用jquery循环我的图像＆amp;使用“标题”创建一个数组＆amp; “src”值？

这是我的图片列表：

<div id="myImages">
  <img data-title="1" src="1.jpg" alt="">
  <img data-title="2" src="2.jpg" alt="">
  <img data-title="3" src="3.jpg" alt="">
  <img data-title="4" src="4.jpg" alt="">
</div>

这就是我需要的数组：

[ { "title" : "1", "image" : "1.jpg", }, { "title" : "2", "image" : "2.jpg", }, { "title" : "3", "image" : "3.jpg", }, { "title" : "4", "image" : "4.jpg", } ]

Answer 1

使用.map()将一组dom元素转换为不同的表示

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

演示：Fiddle

Answer 2

试试这个：

var data = [];

$('#myImages img').each(function() {
    var img = {title: $(this).data('title'), image: $(this).attr('src')};
    data[data.length] = img;
});

Answer 3

var imageArray = [];
$('#myImages img').each(function() {
  imageArray.push({title: $(this).data('title'), image: $(this).attr('src')});
});