make array from a list of images with jquery
i have a list of photos like this:
<div class="upimage">
<ul id="upimagesQueue" class="thumbs ui-sortable">
<li id="upimagesKHGYUD">
<a href="uploads/0002.jpg">
<img src="uploads/0002.jpg" id="KHGYUD">
</a>
</li>
<li id="upimagesNCEEKI">
<a href="uploads/0003.jpg">
开发者_StackOverflow中文版 <img src="uploads/0003.jpg" id="NCEEKI">
</a>
</li>
<li id="upimagesPWSHUN">
<a href="uploads/0003.jpg">
<img src="uploads/0003.jpg" id="PWSHUN">
</a>
</li>
<li id="upimagesOYJAQV">
<a href="uploads/0004.jpg">
<img src="uploads/0004.jpg" id="OYJAQV">
</a>
</li>
</ul>
</div>
i want to make a function in jquery too get all the images in 1 array to be able to sent the array to php! the array i want to be in this form:
array(
'image_id_1' => array(
'image_src_1' => 'xyz.jpg',
)
'image_id_2' => array(
'image_src_2' => 'xyz.jpg',
)
'image_id_3' => array(
'image_src_3' => 'xyz.jpg',
)
'image_id_4' => array(
'image_src_4' => 'xyz.jpg',
)
)
how i can code this? thanks
var a = {};
$(".upimage img").each(function() {
a[this.id] = $(this).attr("src");
});
would give you
a = {
"KHGYUD": "uploads/0002.jpg",
"NCEEKI": "uploads/0003.jpg",
"PWSHUN": "uploads/0003.jpg",
"OYJAQV": "uploads/0004.jpg"
};
Not sure why you would want a multi-dimensional array.
UPDATED
DEMO: hhttp://jsbin.com/idovi3/6
from what you asked the jQUERY PLUGIN is ;-)
(function($) {
$.fn.serializeImages = function() {
//create the array...
var toReturn = [];
//get the LI
var els = $(this);
//loop trought each LI ...
$.each(els, function(i) {
//get the Li id...
var id = $(this).children().children().attr('id');
//get the img src of the parent A parent IMG...
var val = $(this).children().children().attr('src').split('uploads/')[1];
//put each item in the array...
toReturn.push(
// format the array...
id + ' => array( "image_src_' + i + '"' + ' => ' + val + ', )'
);
});
//join all into one single var for easy access..
// \n can be whatever you want
var array = toReturn.join('\n');
return array;
}
})(jQuery);
$(function () {
var serie = $('ul li').serializeImages();
alert(serie);
});
ECHO:
KHGYUD => array( "image_src_0" => 0002.jpg, )
NCEEKI => array( "image_src_1" => 0003.jpg, )
PWSHUN => array( "image_src_2" => 0003.jpg, )
OYJAQV => array( "image_src_3" => 0004.jpg, )
var images = {};
$('.upimage li').each(function(){
var $img = $(this).find('img'),
imgObj = {};
imgObj[$img.attr('src')] = $img.attr('id');
images[$(this).attr('id')] = imgObj;
});
// Then to send to php
$.post('url', images, function(){ /* success */ });
(it seems like you had the image src in their twice, so I just assumed you meant the li id first then the image src, either way, it's a small change)
精彩评论