jQuery .context

What Is .context?

The DOM node originally passed to jQuery() as the search root. If none was passed, it is usually the document. Added in jQuery 1.3. It is a property — not a method — so write $("li").context, not $("li").context().

$("ul").context              // usually document
$("ul", document.body).context // BODY element

// Second arg still scopes the search in jQuery 3.x
// Reading .context back only works on 1.x / 2.x

How to Use .context

Pass an optional root into jQuery(), then (on 1.x / 2.x) read it back from the collection.

1. Optionally pass a DOM node as the second argument: $(sel, root).
2. jQuery searches only inside that root (or the document if omitted).
3. On jQuery 1.x / 2.x, read .context — a native Element or Document.
4. In jQuery 3.x, keep the root variable yourself — do not read .context.
5. For events, bind with .on() on a stable parent instead of removed .live().

Pseudocode

root = optional DOM node (or document)
set = jQuery(selector, root)
  → search only inside root
  → (jQuery 1.x / 2.x) set.context = root

// Modern (jQuery 3.x):
root = document.getElementById("panel")
set = $(selector, root)   // scoping still works
keep root in your variable  // do not read .context

// Events:
$(root).on("click", ".child", handler)

Cheat Sheet

Keep these facts handy when reading legacy collections.

Live Preview

Pick a search root and see what .context returns — same idea as the official jQuery API demo (runs on jQuery 1.12.4).

Click “Read .context” to start.

jQuery Examples

Short, copy-ready snippets. Examples 1–4 need jQuery 1.12.4 for .context. Example 5 uses modern jQuery 3.x with .on().

$("ul")
  .append("<li>context: " + $("ul").context + "</li>")
  .append("<li>nodeName: " + $("ul", document.body).context.nodeName + "</li>");

context: [object HTMLDocument]
nodeName: BODY

var panel = document.getElementById("panel-a");
var $tags = $(".tag", panel);

$("#out").text(
  "count=" + $tags.length +
  ", id=" + $tags.context.id +
  ", same=" + ($tags.context === panel)
);

count=2, id=panel-a, same=true

var main = document.getElementById("main");
var $all = $("button");
var $inMain = $("button", main);

$("#out").text(
  "all=" + $all.length + " (" + $all.context.nodeName + ")\\n" +
  "scoped=" + $inMain.length + " (" + $inMain.context.id + ")"
);

all=2 (HTMLDocument)
scoped=1 (main)

var zoneA = document.getElementById("zone-a");
var zoneB = document.getElementById("zone-b");
var $fromA = $(".item", zoneA);
var $merged = $fromA.add($(".item", zoneB));

$("#out").text(
  "fromA=" + $fromA.context.id +
  ", merged=" + $merged.context.id +
  ", length=" + $merged.length
);

fromA=zone-a, merged=zone-a, length=2

$("#feed").on("click", ".item", function () {
  $("#status").text("Selected: " + $(this).text());
});

$("<div>", { "class": "item", text: "Post 3" })
  .appendTo("#feed");

Click any .item — including ones added later.
Selected: Post 2

Performance Notes

The property itself was cheap metadata. Real savings come from scoping selectors with a second argument so jQuery searches a smaller subtree.

Key Takeaways