jQuery children() Method

jQuery Traversal Methods

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

Note: The children() method only traverses a single level of the DOM tree. To traverse multiple levels, please usefind()method.

The children() method is similar tocontents()Method, the difference is that it does not return text and comment nodes.

Syntax:

$(selector).children(selectorExpression)

Example

Return the element that is a direct child of DIV:

$("document").ready(function(){
　　$("div").children().css("background-color", "coral");
});

Return all direct children of the DIV:

$("document").ready(function(){
　　$("div").children("p").css("background-color", "coral");
});

Return all child elements of the clicked element:

$("#container").click(function(event){
　　$("*).removeClass("hilite");
　　let kids = $(event.target).children();
　　let len = kids.addClass("hilite").length;
　
　　$("#results span:first").text(len);
　　$("#results span:last").text(event.target.tagName);
　
　　event.preventDefault();
});

The children() method only traverses a single level of the DOM tree downwards. The following example returns the direct child element of div id="box":

Parameter Value

jQuery Traversal Methods