jQuery .children() Method

What Is .children()?

.children([selector]) (since jQuery 1.0) returns the direct child elements of each matched element — one level down. Optional selector keeps only matching children. Returns a new jQuery set (chainable); does not change the DOM.

$("ul.level-2").children();           // all direct li children
$("div").children(".selected");       // only .selected children
$("ul").children("li");               // filter by tag

// children → one level (A, B, C)
// find("li") → all depths (A, B, C, 1, 2, 3)
// contents() → elements + text + comments

How to Use .children()

Select a parent, then call .children() (optionally with a filter).

1. Select the parent(s) — e.g. $("ul.level-2").
2. Call .children() for every direct child element.
3. Or pass a selector: .children(".selected") to filter.
4. Chain methods on the new set (.append(), .each(), …).
5. Remember: text nodes are skipped — use .contents() if you need them.

Pseudocode

call $(parents).children(selector?)

result = empty set
for each parent in the matched set:
    for each direct child element of parent:
        if no selector OR child matches selector:
            add child to result

return result as a new jQuery object
(text/comment nodes are never included)

Cheat Sheet

Keep these differences next to .find().

Live Preview

Run .children() or .find("li") on the sample list and compare counts.

Ready — choose a method and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("ul.level-2").children().append(" [child]");

A [child]
B [child]   (nested 1, 2, 3 stay unmarked)
C [child]

$("div").children().append(" [child]");

p and span children get [child]
Loose text inside a div is not a child element

$("div").children(".selected").append(" [selected]");

Hello
Hello Again [selected]
And Again
And One Last Time [selected]

$("#container").on("click", function (event) {
  var kids = $(event.target).children();
  $("#results").text(
    "Found " + kids.length + " children in " + event.target.tagName
  );
  event.preventDefault();
});

Click a DIV with two kids → Found 2 children in DIV
Click a leaf SPAN → Found 0 children in SPAN

var c = $("ul.level-2").children("li").length;
var f = $("ul.level-2").find("li").length;
$("#out").text("children('li'): " + c + "\nfind('li'): " + f);

children('li'): 3
find('li'): 6

Performance Notes

Prefer .children() when you know the structure is flat under the parent — it avoids walking an entire subtree.

Key Takeaways