Я пытаюсь использовать плагин галереи, который загружает изображения из массива (скрипт). Я хочу создать этот массив из списка элементов внутри контейнера, таких как:

<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", поэтому он не работает. Я использую этот код:

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.

Какие-либо предложения?

Большое спасибо!

0
Carlos Hidalgo 10 Янв 2017 в 17:36

3 ответа

Лучший ответ

Вы можете использовать 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>
3
Nenad Vracar 10 Янв 2017 в 14:42
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.

0
gpasci 10 Янв 2017 в 14:43

Попробуй это:

var arr = [];
$('#gallery2 img').each(function (index, element) {
  var tempObject = {};
  tempObject.src = $(this).attr('src');
  tempObject.caption = $(this).attr('title');
  arr.push(tempObject);
});
3
Z-Bone 10 Янв 2017 в 14:43