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>

$(".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


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’ Smile


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s