Javascript/jQuery contains and not contains sample
<div class="navigationelementsContainer clear_fix"> {{each navelement}} {{if name != 'null'}} <div class="navigatorModifier pointer" data-name='${name.toUpperCase()}' data-modifier='${modifier}'>${name} (${count})</div> {{/if}} {{/each}} </div>
$(".navigatorModifierSearch").live('keyup', function (event) { var $navigationelementsContainer = $(this).parent().parent().find(".navigationelementsContainer"); var searchTerm = $(this).val(); if (searchTerm.length > 0) { $navigationelementsContainer.find('div[data-name*="' + searchTerm.toUpperCase() + '"]').removeClass("hideNavElement"); $navigationelementsContainer.children().not('div[data-name*="' + searchTerm.toUpperCase() + '"]').addClass("hideNavElement"); } else { //make sure all are showing $navigationelementsContainer.children().removeClass("hideNavElement"); } });
https://gist.github.com/1207961.js
Key section:
$navigationelementsContainer.find(‘div[data-name*="' + searchTerm.toUpperCase() + '"]‘).removeClass("hideNavElement");
$navigationelementsContainer.children().not(‘div[data-name*="' + searchTerm.toUpperCase() + '"]‘).addClass("hideNavElement");
Not the best blog post.. but it’s pretty nice way to select elements by attribute with ‘contains’ as well as ‘not contains’ ![]()