Better jQuery data-* filtering
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Because the world is better through a filter.

At LayerVault, we make heavy use of filtering DOM elements by their data-* attributes. That's because we believe JavaScript is the worst place to keep your Model.

We might have a dozen or so data-* attributes attached to different DOM elements. You'll be surprised how much easier your life will be.

Old Way

var versions = $('.Revision').filter('[data-project-id="' + projectId + '"]');

New Way with

var versions = $('.Revision').dfilter('project-id', projectId);

You can even opt to only check against existence of a non-blank data-* attribute:

var versions = $('.Revision').dfilter('project-id');
var sameVersions = $('.Revision').dfilter('project-id', true);

Or, give it an array!

var versions = $('.Revision').dfilter('project-id', [100, 101]);

You can also filter using true and false. A value of true filters elements with that data attribute, even if the attribute is blank. A value of false will select all things without that data attribute:

var versions = $('.Revision').dfilter('project-id', false); // Selects all revisions without a project-id


Quick and Dirty Way

Host and serve out in a script tag:

<script src="/"></script>

Best Way

Make sure this gets combined into your asset package. It's a small file and it'd be a shame to waste a whole request on it.


jquery.text.fadeto.js was originally developed for LayerVault by Kelly Sutton.

You can see more projects from LayerVault in the LayerVault Cosmos.