jQuery Utilities

What You’ll Learn

jQuery Utilities are standalone functions on the jQuery / $ namespace — not tied to a DOM selection. Key helpers include jQuery.each() for iteration, jQuery.map() for transforming collections, jQuery.grep() for filtering arrays, jQuery.extend() for merging objects, jQuery.merge() for combining arrays, jQuery.makeArray() for converting NodeLists into true arrays, jQuery.inArray() for finding a value’s index, jQuery.type() for accurate type detection, jQuery.isArray() for boolean array tests, jQuery.isEmptyObject() for empty object checks, jQuery.isFunction() for callback validation, jQuery.isNumeric() for finite number checks, jQuery.isPlainObject() for plain {} validation, jQuery.isWindow() for browser window detection, jQuery.isXMLDoc() for XML document checks, jQuery.contains() for DOM descendant tests, jQuery.data() for element data storage, jQuery.globalEval() for global script execution, and jQuery.noop() for optional callback placeholders. This hub links to 35 utility tutorials with full examples and try-it labs.

Introduction

Most jQuery tutorials focus on selecting DOM elements with $() and chaining methods. Utilities live one level up: they are global jQuery functions you call as jQuery.each(...) or $.each(...) without building a jQuery object first.

The most important utility for beginners is jQuery.each(). It gives you one consistent way to loop over arrays (numeric indexes), array-like objects (such as arguments or a NodeList), and plain JavaScript objects (named keys). That saves you from writing separate for loops for every data shape.

Examples Gallery

Include jQuery 3.7+ and open DevTools Console (F12) to run each snippet, or open the full jQuery.each() tutorial for try-it labs.

$.each([52, 97], function (index, value) {
  console.log(index + ": " + value);
});
// → 0: 52
// → 1: 97

0: 52
1: 97

const obj = { flammable: "inflammable", duh: "no duh" };

$.each(obj, function (key, value) {
  console.log(key + ": " + value);
});
// → flammable: inflammable
// → duh: no duh

flammable: inflammable
duh: no duh

$.each(["a", "b", "c", "d"], function (i, letter) {
  console.log(letter);
  if (letter === "c") {
    return false; // stops — like break
  }
});
// → a, b, c (d is never logged)

a
b
c

const prices = [9.99, 14.50, 3.25];
let total = 0;

$.each(prices, function (i, price) {
  total += price;
});

console.log("Total:", total.toFixed(2)); // → Total: 27.74

Total: 27.74

const words = ["one", "two", "three", "four", "five"];
const numerals = { one: 1, two: 2, three: 3, four: 4, five: 5 };

$.each(words, function (i, word) {
  $("#" + word).text("Mine is " + word + ".");
  return word !== "three"; // stop after "three"
});

$.each(numerals, function (key, num) {
  $("#" + key).append(" — " + num);
});