jQuery :data() selector

Benchmark created on November 7, 2011

Preparation HTML

<div id="list">
<div data-code="1">1</div>
<div data-code="2">2</div>
<div data-code="3">3</div>
<div data-code="4">4</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $.expr[':'].data = function(elem, counter, params) {
        if(!elem || !params) 
            return false;

        var query = params[3];
        if(query) 
        {
            var split = query.split('=');

            var data = $(elem).data(split[0]);
            if(data) {
                // If the query was just checking to see if the
                // field existed, then we're good!
                if(split.length == 1) 
                    return true;
                
                return (data+'') == split[1];
            }
        }

        return false;
    };
</script>

Setup

var code = '4';
    var $divs = $('#list div');

Test runner

$divs.filter(function() { return $(this).data('code') == code; })

$divs.filter(':data("code=4")')

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on November 7, 2011