jQuery Next Adjacent Selector (“prev + next”)

What Is the Next Adjacent Selector?

The adjacent sibling combinator prev + next selects elements matching next that are immediately preceded by a sibling matching prev. Both sides must share the same parent. Available since jQuery 1.0 (standard CSS).

$("prev + next")

$("label + input")  → input right after a label
$("h2 + p")         → first p after each h2 only

$("h2 ~ p")         → all following sibling p (general)
$("div input")      → input nested inside div (descendant)
$("div > input")    → direct child input (child)

How to Use prev + next

Name the previous sibling, add +, then name the element that must sit right after it.

1. Confirm both elements are siblings under the same parent.
2. Write $("prev + next") — for example $("label + input").
3. Chain a method: .val(), .addClass(), events, and so on.
4. If you need every following match, use ~ instead of +.

Pseudocode

for each element E matching "next":
    P = E.previousElementSibling
    if P exists and P matches "prev":
        and P.parent === E.parent:
            keep E

return jQuery(kept elements)

Cheat Sheet

Keep these facts handy while writing adjacent sibling selectors.

Live Preview

Pick a combinator against a small sample DOM and see which nodes match.

$("label + input")
matched: 2
tags: INPUT, INPUT

/* + = immediate next sibling */

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

$("label + input").each(function () {
  this.value = "Labeled!";
});

console.log($("label + input").length);

2
Both inputs after labels get value "Labeled!"

$("h2 + p").each(function () {
  this.textContent = "[lead] " + this.textContent;
});

console.log($("h2 + p").length);
console.log($("h2 ~ p").length);

2
3
Only immediate h2 + p get the [lead] prefix

// Markup: h2, p, p, p (same parent)
console.log("+:", $("h2 + p").length);  // 1
console.log("~:", $("h2 ~ p").length);  // 3

+: 1
~: 3

+ = immediate only; ~ = all following siblings

console.log("span + input:", $("span + input").length);
console.log("div input:", $("div input").length);

// + → input immediately after a span sibling
// space → any input nested inside a div

span + input: 1
div input: 1

Sibling adjacency ≠ nesting

var $byPlus = $("label + input");
var $byNext = $("label").next("input");

console.log($byPlus.length === $byNext.length);
console.log($byPlus.length);

true
2
Same adjacent inputs via + and .next("input")

Performance Notes

Prefer the narrowest combinator that matches your intent. + is cheaper to reason about than ~ because it returns at most one sibling per previous match.

Key Takeaways