Question

I’m trying to filter out elements in an Underscore template. For example I want only to return the elements that do not have a class name of “pin”. Anyone know how I could do that either with underscore methods or jquery

var renderToHTML = function( data ) {
    var list = data.results[0].items;
    var tmpl = $( template({items : list}) );
    // var layout = tmpl.filter()
}

My template code looks like this.

<% _.each(items,function(item,i){ %> 
    <% var cls=( item.id == 'feature') ? "pin" : 'item'; %>
    <div class="<%=cls%> <%=item.id%>" style="width:<%=item.width%>px">
        <div class="itemInner">
            <img src="<%= item.img %>" />
            <div class="title"><%= item.title %></div>
        </div>
    </div>
<% }); %>

Answer 1

If you want to extract the <div>s without a class of pin from the generated HTML, then you’d probably want to use :not:

$(':not(.pin)')
$('some_prefix_for_specificity :not(.pin)')
$some_root_element.find(':not(.pin)')
//...

Or, given the logic inside your template, you might be able to look for .item instead:

$('.item')
$('some_prefix_for_specificity .item')
$some_root_element.find('.item')
//...

If you only want to include non-pins in the HTML that comes out of your template, then:

<% _.each(items, function(item, i) { %>
    <% if(item.id != 'feature') { %>
        <div class="item <%= item.id %>" style="width: <%= item.width %>px">
            <!--...-->
        </div>
    </div>
<% }); %>

Or perhaps use _.chain and _.filter:

<% _(items).chain().filter(function(item) { return item.id != 'feature' }).each(function(item, i) { %>
    <div class="item <%= item.id %>" style="width: <%= item.width %>px">
        <!-- ... -->
    </div>
<% }); %>

If you want to do it at this level:

var tmpl = $(template({items : list}));

Then you’d want to use jQuery’s filter instead of find:

var not_pins = tmpl.filter(':not(.pin)');

or, again, given the specific structure of your template:

var not_pins = tmpl.filter('.item');