Question

I have a function that shows a pop-up with 8 thumbnails inside. In the pop-up there’s a default picked thumbnail.

What I want to do is, in my loop, I want to check the thumbnail rel attribute (1 to 8). If it matches the default picked one, I want to add a selected state.

Code to generate the 8 thumbnails:

jQuery.each(videos[id], function(i, val) {
    $ul.append("<li><a rel='"+ (i+1) + "'><img src=" + val + "></a></li>");
});

I also have that variable that contains a number from 1 to 8 (this is the one that should have the selected class)

alreadySelectedThumb[id]

So basically, the logic (in word) is:

Loop trough the video array, if the rel attribute of the a tag is equal to alreadySelectedThumb[id] then add a class selected to that a tag.

Because its in an append function, I have no idea on how to do it.

Answer 1

One possibility would be to reverse your append call making the new object the return,

var $image = $("<li><a rel='"+ (i+1) + "'><img src=" + val + "></a></li>").appendTo($ul);

if(whatever){
   $image.children("a").addClass("selected");
}

It keeps the code neater IMO.