Reputation: 9583
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
Reputation: 139
You could probably rewrite it as
StackMedia.prototype.updatePositions = function() {
this.items.css('left', 50);
}
Upvotes: 0
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
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
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