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'}
]

我一直在尝试一些我在这里找到的例子，但没有运气。我认为我的结果数组不是一个正确的＆＃34; javascript数组＆＃34;，所以它不起作用。我正在使用此代码：

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(','));

结果是：

{ 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'}

到目前为止，接缝数组具有我需要的格式，但由于某种原因，加载此图像数组的函数无法正常工作。结果如下：

<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

试试这个：

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

Answer 2

您可以使用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 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对象数组。

将元素列表转换为数组

3 个答案: