make array from a list of images with jquery

Question

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">
            <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

Tomalak · Accepted Answer · 2010-04-19 17:30:36Z

5

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.

edited Apr 19, 2010 at 17:30

answered Apr 19, 2010 at 17:13

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

maid450 Over a year ago

as upimage is div's class it should be $(".upimage img")... or $("#upimagesQueue img")...

robertdd Over a year ago

i will need to add more data , thats why i need multi-dimensional array.

Tomalak Over a year ago

@robertdd: Please make a more useful output sample. Yours does not even reflect your input. Also don't forget to include a case where the nested array actually makes sense.

Tomalak Over a year ago

@robertdd: Being responsive is actually a good thing. You should try it. ;)

Luca Filosofi · Accepted Answer · 2010-04-19 18:34:50Z

0

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, )

edited Apr 19, 2010 at 18:34

answered Apr 19, 2010 at 17:33

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

2 Comments

robertdd Over a year ago

nice! but how i can recive the id to? i add "var id = $(this).attr('id');" but not working

robertdd Over a year ago

i added "var id = $(this).children().children().attr('id');" to get the image id!

Alex Sexton · Accepted Answer · 2010-04-19 17:16:21Z

0

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)

answered Apr 19, 2010 at 17:16

Alex Sexton

10.4k2 gold badges32 silver badges42 bronze badges

Collectives™ on Stack Overflow

make array from a list of images with jquery

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related