how to reference appended element and tween in a loop

[colep]

I have a function that loops and appends an elements to a div.

How can i reference this newly added element and tween it?

 

 

clickableGrid: function( ){

for (var i = 0; i < 30; i ++)

{

var box = createItem();

$("#tilesview").append(box);

 

//How can i reference this newly added element and tween it?

TweenLite.to($(box), duration, {css : {top:90,left: 100},});

?

}

}

 

createItem: function () {

var tileItem = "<div class='tileItem'><div class='tileImage'></div><div class='tileTitle'>test</div></div>"

return tileItem

},

 

I have been adding them to the stage and then using

 

 

boxes.each( function (i){

 

box = $(this);

 

}

 

to target each added item. but i bet there is a better way. only one iteration.

thanks

cp

[jamiejefferson]

Something like this should be fine to use:

clickableGrid: function() {
 for (var i = 0; i < 30; i ++) {
var box = $(createItem()); // $(...) can be used to create a new DOM element if you feed it valid html as a string
$("#tilesview").append(box); // this new jQuery object is good to go for appending ...
TweenLite.to(box, duration, {css: {top: 90, left: 100}}); // ... and for tweening
 }
}

createItem: function () {
 var tileItem = "<div class='tileItem'><div class='tileImage'></div><div class='tileTitle'>test</div></div>";
 return tileItem;
}

 

It's probably just from you trimming your example down, but it's good to mention that you should remove all trailing commas in javascript objects as IE will have a fit.

 

Also, in regards to DOM elements and your 'boxes' solution, it would be more efficient to just do that as

boxes.each( function (i) {
 TweenLite.to(this, duration, {css: {top: 90, left: 100}});
}

this is a direct reference to the DOM element, which greensock handles perfectly. $(this) just adds the ability to call jQuery functions on that DOM element, so it's more efficient not to do it unless you have to use jQuery on it.

[colep]

thank you that works!

cp