jQuery create multidimensional array from multiple elements

Question

How can I make a multidimensional array with structure like this one for each li with class sl-item:

$imagesList = [
 [1, 123, "<img src=\"/img-src/123.jpg \" />", "/photo/img-123", "image-alt "],
 [2, 452, "<img src=\"/img-src/452.jpg \" />", "/photo/img-452", "image-alt "],
];

First should be just number of array, 1,2,3..., second part is the id of li element, third is the img with img src, fourth is the url from a with class photo-url and fifth is the img alt. My structure is the following:

<ul class="sl-img">
 <li id="123" class="sl-item">
 <a class="photo-url" href="/photo/img-123">
 <img alt="image-alt" src="/img-src/123.jpg" >
 </a>
 </li>
 <li id="452" class="sl-item">
 <a class="photo-url" href="/photo/img-452">
 <img alt="image-alt" src="/img-src/452.jpg" >
 </a>
 </li>
 .....
</ul>

• user400654: Why do you need the number in the array? isn't that covered by the index in the array?
• user2406735: yes it is covered by index, you are right, that can be left out.

Answer 1

Something like this perhaps?

var result = [];
$('li').each(function(i){
 var $img = $(this).find('img');
 result.push([i+1, this.id, $img[0], $img.prop('src'), $img.prop('alt')]);
});
console.log(result);

I tried with map() at first, but it seems to flatten the array.

http://jsfiddle.net/EX6Dt/