CODEWITHSUNDEEP
jqueryarrays
Beginner
Beginner

Reputation: 29573

How to get image id into jquery array?

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]);
        });

Upvotes: 0

Views: 1778

Answers (5)

Niklas
Niklas

Reputation: 30012

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/

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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"));
});

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337714

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.

Upvotes: 2

PanJanek
PanJanek

Reputation: 6685

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"));
            });

        });

    });

Upvotes: 2

Manse
Manse

Reputation: 38147

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

Upvotes: 2

Related Questions