How can I use data returned by jQuery selector with templates?

Question

How can I render a template, mustache.js for example, using data returned by a jQuery selector? Like so:

var imgs = $('img'),
    arrayOfImgs = { img : $.makeArray(imgs) },
    template = "{{#img}} <span> {{.}} </span> {{/img}}",
    html = Mustache.render(template, arrayOfImgs);
$('.portfolio').html(html);

That doesn't work as $.makeArray(imgs) returns array of img objects, is there a work around?

Answer 1

You'll have to return the HTML as string, which is easily done with a $.map and returning this.outerHTML

var imgs = $('img'),
    arrayOfImgs = $.map(imgs, function(el) { return el.outerHTML; }),
    template = "{{#img}} <span> {{.}} </span> {{/img}}",
    html = Mustache.render(template, arrayOfImgs);

$('.portfolio').html(html);

Answer 2

Just use var imgs = $('img') . It's already an array of img html tags. I don't know how Mustache works.