How to get image id into jquery array?

Question

Im trying to get all the ids4's from a list of images in a div into an jquery array. This is the html:

<div id = "tdgallerys">
   <img id2="/uploads/ssp/album_2/image_10.jpg" 
        id3="Pic1"  id4="1"
        src="/uploads/ssp/album_2/thumbnails/image_10.jpg"  
        rel="scrollers"/>                  
   <img id2="/uploads/ssp/album_2/image_11.jpg" 
        id3="Pic2"  id4="2"
        src="/uploads/ssp/album_2/thumbnails/image_11.jpg"  
        rel="scrollers"/>                  
   <img id2="/uploads/ssp/album_2/image_12.jpg" 
        id3="Pic3"  id4="3"
        src="/uploads/ssp/album_2/thumbnails/image_12.jpg"  
        rel="scrollers"/>                  
 </div>

This is what i am trying:

$(document).ready(function () {     
        var images = new Array();
        var count = 0;
        var id = 0;

        $("[rel='scrollers']").click(function (event) {            
            var dvImages = $('#tdgallerys img').attr('id4');   
            $.each(dvImages , function (i) {
                images.push(dvImages);
                alert(dvImages);
            });
            var desc = $(this).attr('id3');
        });

    });

I put the array outside the click function because i need to access the array from another click function later

 $("#next").click(function (event) {
            id = id++;
            alert(images[id]);
        });

What's not working with that code?

Anthony Grist
– Anthony Grist

2012-02-17 10:59:44 +00:00
Commented Feb 17, 2012 at 10:59 — Anthony Grist
– Anthony Grist, Commented Feb 17, 2012 at 10:59

Rory McCrossan · Accepted Answer · 2012-02-17 10:57:56Z

2

You need to iterate over the collection of image themselves, then push the id4 attribute into the array.

$(document).ready(function () {     
    var images = [];
    var count = 0;
    var id = 0;

    $("[rel='scrollers']").click(function (event) {            
        var dvImages = $('#tdgallerys img');
        $.each(dvImages, function(i) {
            images.push($(this).attr("id4"));
        });
        var desc = $(this).attr('id3');
    });
});

Example fiddle

It's worth noting though, that creating your own attributes, such as id2, id3 and id4 is invalid, and will mean your page will not validate. Instead, look at using the data attribute in HTML5.

answered Feb 17, 2012 at 10:57

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Manse · Accepted Answer · 2012-02-17 10:57:40Z

2

Try :

$.each($('#tdgallerys img') , function (i) {
   var id4 = $(this).attr('id4');
   images.push(id4);
});

Working example here -> http://jsfiddle.net/PbBxV/1/

You really should be using the data() function within jQuery for storing customer attributes on DOM Elements

answered Feb 17, 2012 at 10:57

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Comments

PanJanek · Accepted Answer · 2012-02-17 10:57:41Z

2

Try:

$(document).ready(function () {     
        var images = new Array();
        var count = 0;
        var id = 0;

        $("[rel='scrollers']").click(function (event) {            
            var dvImages = $('#tdgallerys img');   // collection of images
            $.each(dvImages , function (i) {
                images.push(i.attr("id4"));  // for each image push value of id4
                alert(i.attr("id4"));
            });

        });

    });

answered Feb 17, 2012 at 10:57

PanJanek

6,7172 gold badges38 silver badges43 bronze badges

1 Comment

Manse Over a year ago

This will not work .... i is not a jquery object - its an int see api.jquery.com/each

Christofer Eliasson · Accepted Answer · 2012-02-17 10:58:19Z

2

You are selecting the attribute to early. You need to loop over the set of images selected with $("#tdgallerys img"), and then get the attribute for each image in that set.

Try this instead:

var dvImages = $('#tdgallerys img');   
$.each(dvImages , function (i) {
   images.push($(this).attr("id4"));
});

answered Feb 17, 2012 at 10:58

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Comments

Niklas · Accepted Answer · 2012-02-17 11:02:08Z

1

You can use .map to walk through each element and to retrieve what you are after (attr id4 in this case):

var dvImages = $('#tdgallerys img').map(function(){
    return $(this).attr('id4');
});

example: http://jsfiddle.net/xs4h4/

answered Feb 17, 2012 at 11:02

Niklas

30k5 gold badges54 silver badges74 bronze badges

Collectives™ on Stack Overflow

How to get image id into jquery array?

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related