Element Data and Utility Functions

This section documents jQuery 3.x (the current major line — no specific patch version is pinned). This content was generated with the assistance of AI and should be verified against the official jQuery API reference before being relied on in production, since API details and deprecations continue to change between releases.

jQuery is legacy-leaning: modern browsers implement native equivalents for almost everything it does (querySelectorAll, classList, fetch, addEventListener, append/prepend/remove, the Web Animations API), and most current stacks — Bootstrap 5 included — have dropped it. Prefer the native APIs for new work; this reference is aimed at reading, maintaining, or incrementally migrating code that already uses jQuery. Every page ends with a Modern equivalent note pointing at the native replacement.

This section’s bibliography lists the reference material consulted while preparing these pages.

Two families here: instance methods that read information off a wrapped set (.data(), .index(), .get()), and static jQuery.* functions that operate on plain values rather than DOM elements.

.data() — per-element storage

$('#row').data('state', 'open');     // store (in jQuery's internal cache, NOT the DOM)
$('#row').data('state');             // read -> 'open'
$('#row').data();                    // read all -> { state: 'open' }
$('#row').removeData('state');       // remove one key

.data() also reads data-* attributes, once:

<div id="row" data-user-id="42" data-config='{"open":true}'></div>
$('#row').data('userId');   // 42  (number -- jQuery coerces; note camelCase from data-user-id)
$('#row').data('config');   // { open: true }  (valid JSON is parsed to an object)

Key points that surprise people:

  • The data-* attribute is read only on first access, then cached. Later .data() calls read the cache.

  • .data('userId', 99) updates the cache but does not write back to the data-user-id attribute — the DOM still shows 42. Use .attr('data-user-id', 99) if the attribute itself must change.

  • data-user-id in HTML becomes userId in .data() (kebab-case to camelCase).

.index() — position among siblings

$('#item').index();               // position of #item among its siblings (0-based)
$('li').index($('#item'));         // position of #item within the jQuery set of all <li>
$('li').index(domNode);            // same, given a raw element
$('#list li.active').index();      // position of the first .active <li> among its siblings

Getting raw DOM nodes out

$('li').get();        // -> real Array of HTMLLIElement
$('li').get(0);       // -> the first raw element (supports negative index: .get(-1) = last)
$('li').toArray();    // -> real Array (same as .get() with no arg)
$('li')[0];           // -> the first raw element (bracket access, no negative index)

.get(0) and [0] return the same node; .get() is preferred when you want the negative-index convenience or a genuine array to run Array methods on.

Static utility functions

jQuery.each(coll, (key, val) => { /* ... */ });   // iterate array OR object; return false to break
jQuery.map(arr, (val, i) => val * 2);              // map; returned null/undefined items are dropped
jQuery.grep(arr, (val, i) => val > 0);             // filter
jQuery.grep(arr, fn, true);                         // filter, INVERTED
jQuery.extend(target, src1, src2);                 // shallow-merge sources into target
jQuery.extend(true, target, src);                  // DEEP merge
jQuery.merge(first, second);                        // append second's items onto first (mutates first)
jQuery.inArray(value, arr);                         // index of value, or -1  (like indexOf)
jQuery.now();                                       // Date.now()
jQuery.fn.jquery;                                   // the loaded version string, e.g. "3.7.1"

Deprecated — use the native form

Deprecated jQuery utility Native replacement

jQuery.trim(str)

str.trim()

jQuery.type(x)

typeof x / Array.isArray(x) / x === null

jQuery.isArray(x)

Array.isArray(x)

jQuery.isFunction(x)

typeof x === 'function'

jQuery.parseJSON(s)

JSON.parse(s)

jQuery.each / jQuery.map / jQuery.grep

Array.prototype.forEach / map / filter, for…​of

jQuery.inArray(v, a)

a.includes(v) / a.indexOf(v)

jQuery.extend({}, a, b)

Object.assign({}, a, b) / { …​a, …​b }

jQuery.now()

Date.now()

Modern equivalent

el.dataset.userId reads/writes data-* attributes directly (string values only — parse JSON yourself). For arbitrary non-string per-element data with no DOM footprint, a WeakMap keyed by the element is the leak-free equivalent of jQuery’s data cache. The utility functions map to Array/Object built-ins as in the table above. See Web programming basics and Arrays & typed arrays.