jQuery children()Method

jQuery 遍历方法jQuery Traversing Methods

Example

Return direct children of <ul>:

$(document).ready(function(){
$("ul").children().css({"color":"red","border":"2px solid red"});
});

Result:

body (great-grandparent)
div (grandparent)
    ul (parent)
  • li (child) span (grandchild)

Try it Yourself »

Definition and Usage

The children() method returns all direct children of the selected elements.

DOM tree:This method only traverses a single level down the DOM tree. To traverse down multiple levels (returning descendant nodes or other descendants), use the find()method.

Tip:To traverse a single level up the DOM tree, or all the way up to the document's root element (returning parent nodes or other ancestors), use theparent()or parents()method.

Note:This method does not return text nodes. To return all child nodes including text nodes, use thecontents()method.

Syntax

$(selector).children(filter)

Parameter Description
filter Optional. Specifies a selector expression to narrow down the search of child elements.

实例

More Examples

Return all direct children of <ul>
How to return all direct children of the <ul> element.

Narrow down the search
How to use the filter parameter to return all <li> elements with class name "1" among the direct children of <ul>.

Return all <p> elements among direct children of <div>
How to select all <p> elements that are direct children of <div>.

Demonstrate descendants of an element by tag name
Demonstrate the descendants of a <div> element.

jQuery 遍历方法jQuery Traversing Methods

Other Extensions