Creating javascript objects out of list elements

Question

I'm having a small issue creating objects out of list items in an unordered list. I'm creating a gallery and I need for each gallery thumbnail to be it's own object, so I'm iterating through each list item using jQuery's $.each()

The problem is I don't know how to give each object/li it's own instance name.

Here's the code:

    function galleryButton(){
        this.link
        this.name
        this.image
        this.identifier,
        this.goPage = function(){
        $('.container').animate({opacity : '0'}, 500).load(this.link + ' .galContainer', function(){$('.container').animate({opacity : '1'})});
        return false;
        }
    }

    $(document).ready(function(){
        $.ajaxSetup({
            cache:false
        });

        $('.gallery li a').each(function(node, value){
            this = new galleryButton();
            this.link = $(this).attr('href');
            this.name = $(this).attr('name');
            this.image = $(this + " img").attr('src');
            this.identifier = $(this).attr('data-pic-id');

            $(this).click(this.goPage);
        })

        $('.goback').click(function(){

            var back = $(this).attr('href');
            $('.container').animate({opacity : '0'}, 500).load(back + ' .gallery', function(){$('.container').animate({opacity : '1'})});
                return false;
        });

    });

You cannot assign to the this keyword!!!

Bergi
– Bergi

2013-07-31 19:32:52 +00:00
Commented Jul 31, 2013 at 19:32 — Bergi
– Bergi, Commented Jul 31, 2013 at 19:32

Jackson Ray Hamilton · Accepted Answer · 2013-07-31 19:17:48Z

1

Don't store your galleryButton into the "this" variable. Make a new var,

var myGalleryButton = new galleryButton();

And update your assignments:

myGalleryButton.link = $(this).attr('href');
/// etc

And then at the end of the .each() function, push myGalleryButton to an array/object for later access.

edited Jul 31, 2013 at 19:17

answered Jul 31, 2013 at 19:10

Jackson Ray Hamilton

9,5766 gold badges54 silver badges81 bronze badges

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

Comments

prodigitalson · Accepted Answer · 2013-07-31 19:14:08Z

0

This doesnt make any sense:

   $('.gallery li a').each(function(node, value){
        this = new galleryButton();
        this.link = $(this).attr('href');
        this.name = $(this).attr('name');
        this.image = $(this + " img").attr('src');
        this.identifier = $(this).attr('data-pic-id');

        $(this).click(this.goPage);
    });

You dont want to override this, you want to create a new object like:

        var slide = new galleryButton();
        slide.link = $(this).attr('href');
        slide.name = $(this).attr('name');
        slide.image = $(this + " img").attr('src');
        slide.identifier = $(this).attr('data-pic-id');

So in this case slide is the instance name, but it is only going to exist within the scope of that function each callback function.

Now if you need to able to access these objects then you either need to create the variables outside the function or put them somewhere else accessible. Were it me i would store them in the data for the li like:

        var slide = new galleryButton();
        slide.link = $(this).attr('href');
        slide.name = $(this).attr('name');
        slide.image = $(this + " img").attr('src');
        slide.identifier = $(this).attr('data-pic-id');
        $(this).closest('li).data('slide', slide);

Then you can access them like $(someSelectorToGetTheLI).data('slide').

answered Jul 31, 2013 at 19:14

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

2 Comments

Optymystyc Over a year ago

How do I access the properties of the objects with $(someSelectToGetLI).data('slide)? Would I go $(thing).data('slide).link?

prodigitalson Over a year ago

Yes, but you should always make sure you actually have the object - if you havent set it with .data yet then .data will return undefined so using .link directly would throw an error. So something like: sliceObj = $(someSelectToGetLI).data('slide'); if(slide) { // do stuff like slide.link }

Collectives™ on Stack Overflow

Creating javascript objects out of list elements

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related