Jquery - print an array with append()

Question

I have a huge table (temporary) of different videos. Every video has a link "Choose thumbnails" for that specific video.

When you click on that link, there's a popup showing, with 8 different thumbnails for that vid.

This is my link:

 <a class="bigThumbnailLink" onclick="showThumb({{stat.video_id}})">Choose</a>

**Note that the curly bracket {{ }} is the TWIG syntax, its just an "echo"

Here im just building an array

var videos = [];

{% for statThumb in stats %}
    videos[{{ statThumb.video_id }}] = [];

    {% for thumb in statThumb.thumbnails %}
        videos[{{ statThumb.video_id }}].push('{{ thumb }}');
    {% endfor %}
{% endfor %}

The outputed array looks like:

 var videos = [];   
     videos[609417] = [];
            videos[609417].push('http://1.jpg');
            videos[609417].push('http://2.jpg');
            videos[609420] = [];

My function

function showThumb(id){
        $("#bigThumbnailArea").show();

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

That code is working. But everytime I click on a link, instead of showing me only the thumbnails for that video, it's adding to the array. So first time I click = 8 thumb (good), 2nd link I click = 16 thumb, 3tr link = 24 etc...

I know that is probably only the way "append()" works...I tried to replace with some other insertion method like .html() but its never the result I want. html() is returning my only 1 thumbnail every time)

Im a bit confused here on how I should do that...

Any helps?

This may work: $("#bigThumbnailArea").find("ul").empty().append("<li><img src=" + val + "></li>"); Note the empty() function call chained — Vikram
– Vikram, Commented Jul 19, 2012 at 17:06
@Vikram: You want to empty outside the loop, so you're not emptying on each iteration. — gen_Eric
– gen_Eric, Commented Jul 19, 2012 at 17:45

gen_Eric · Accepted Answer · 2012-07-19 17:03:08Z

2

You should empty() the ul, then append the lis to it.

function showThumb(id){
    $("#bigThumbnailArea").show();
    var $ul = $("#bigThumbnailArea").find("ul").empty();

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

answered Jul 19, 2012 at 17:03

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

Collectives™ on Stack Overflow

Jquery - print an array with append()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related