jQuery Next Siblings Selector (“prev ~ siblings”)

What Is the Next Siblings Selector?

The general sibling combinator prev ~ siblings selects all following siblings that match siblings, share the same parent as prev, and appear after it in the DOM. Wider reach than +. Available since jQuery 1.0 (standard CSS).

$("prev ~ siblings")

$("#prev ~ div")  → every div sibling after #prev
$("h2 ~ p")       → every p sibling after each h2

$("h2 + p")       → only the immediate next p
$("div p")        → p nested inside div (descendant)

How to Use prev ~ siblings

Name the starting sibling, add ~, then filter which following siblings to keep.

1. Confirm targets are siblings under the same parent (not nested children).
2. Write $("prev ~ siblings") — for example $("#prev ~ div").
3. Chain a method on the whole following set.
4. If you need only the immediate neighbor, switch to +.

Pseudocode

for each element P matching "prev":
    for each following sibling S of P:
        if S matches "siblings":
            keep S

// skipped: elements before P
// skipped: nested children of siblings (nieces)

return jQuery(kept elements)

Cheat Sheet

Keep these facts handy while writing general sibling selectors.

Live Preview

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

$("#prev ~ div")
matched: 3
tags: DIV, DIV, DIV

/* ~ = all following siblings */

jQuery Examples

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

var tags = $("#prev ~ div").map(function () {
  return this.tagName;
}).get().join(", ");

console.log($("#prev ~ div").length);
console.log(tags);

3
DIV, DIV, DIV
(span sibling and nested niece skipped)

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

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

3
1
~ marks all following p; + marks only the lead

// Markup: #prev, div, div, span, div
console.log("~:", $("#prev ~ div").length);  // 3
console.log("+:", $("#prev + div").length);  // 1

~: 3
+: 1

~ keeps going; + stops at the immediate neighbor

// Markup: h2, span, p, p
console.log("h2 + p:", $("h2 + p").length);  // 0 (span in between)
console.log("h2 ~ p:", $("h2 ~ p").length);  // 2

h2 + p: 0
h2 ~ p: 2

A gap blocks +; ~ still finds later siblings

var $byTilde = $("#prev ~ div");
var $byNextAll = $("#prev").nextAll("div");

console.log($byTilde.length === $byNextAll.length);
console.log($byTilde.length);

true
3
Same following divs via ~ and .nextAll("div")

Performance Notes

Prefer a specific prev (id/class) so ~ does not scan more of the tree than you need. Reach for + when one sibling is enough.

Key Takeaways