CODEWITHSUNDEEP
javascriptjquery
clankill3r
clankill3r

Reputation: 9583

use divs from array as jquery object

I have a javascript class like this (i know it's technically not a class).

function StackMedia (container) {

    this.container = container;
    this.items = container.find('.stackItem');
    console.log("this.items.length: "+this.items.length);

}

I pass a container (div) that holds other divs with the css class stackItem, those get stored in items.

Here i want to reuse it:

StackMedia.prototype.updatePositions = function() {

     for (var i = 0; i < this.items.length; i++) {
         this.items[i].css('left', 50);
    }
}

The problem is that it isn't a jquery object anymore so i get this error:

TypeError: 'undefined' is not a function (evaluating 'this.items[i].css('left', 50)')

How can i store them as a jquery object?

update

Here is where i create the classes (works fine):

// create a stack by passing a container
    $('.stackContainer').each(function(containerIndex) {
        $(this).css('z-index', containerIndex);
        stacks.push(new StackMedia($(this)));
    });

This is almost fine apart from the last line

StackMedia.prototype.updatePositions = function() {

    var sm = this; // StackMedia

    // set the css properties of the items
    this.items.each(function(i){
        $(this).css('left', sm.x + i * sm.overlapX);
        $(this).css('top', sm.y + i * sm.overlapY);
        $(this).css('width', sm.itemWidth);
        $(this).css('height', sm.itemHeight);
        $(this).find('img').css('width', sm.itemWidth);
        $(this).find('img').css('height', sm.itemHeight);
    });

    // set the css properties of the container
    //console.log(sm);
    console.log($(this));
    $(this).container.css('width', 400);

};

I get this again: TypeError: 'undefined' is not an object (evaluating '$(this).container.css')

So $(this).container lost it's jquery functionality, how can i get it back?

Upvotes: 2

Views: 137

Answers (4)

Grumsh
Grumsh

Reputation: 139

You could probably rewrite it as

StackMedia.prototype.updatePositions = function() {
   this.items.css('left', 50);
}

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227310

this.items is a jQuery object. Don't loop over it using a normal for loop, use jQuery's .each.

this.items.each(function(){
    $(this).css('left', 50);
});

I'm pretty sure .css affects all elements in a jQuery object, so you can just do:

this.items.css('left', 50);

Upvotes: 5

micadelli
micadelli

Reputation: 2482

Can't you just add an item variable?

StackMedia.prototype.updatePositions = function() {
     var item;

     for (var i = 0; i < this.items.length; i++) {
         item = this.items[i];
         $(item).css('left', 50);
     }
}

Upvotes: 0

Nishu Tayal
Nishu Tayal

Reputation: 20880

Your divs have css class stackItem, so you can easily access those div's using 

$('.stackItem')

It'll return you all DIVs having this class. Try it.

Does not matter what container array contains now. :):)

Upvotes: 0

Related Questions