Yogesh Chauhan's Blog

How to change style of all direct children of an element using jQuery?

in jQuery on March 7, 2021

We can use the children() method to get all direct children of the specified element.

The .children() method searches through the children elements in the DOM and constructs a new jQuery object from the elements that are matched.

The .children() method only travels a single level in the DOM tree.

If you want to traverse multiple levels and select all descendant elements (we call them grandchildren!) in the DOM tree then use the .find() method.

The .children() method doesn’t return text nodes.

We need use the .contents() method to get all children including text and comment nodes.

We can also optionally use selectors to filter out the elements. We can pass selectors using the $() function.

A quick example of jQuery .children() method

This example selects all direct children of ul with level-2 class.

Change style for all direct elements with a class using jQuery .children() method

Credit: jQuery Docs

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create a flip effect with CSS?CSS3 ways to pass a variable in url() function in SCSS (Sass)SCSSJavaScript Data Types and Data Structures Things to RememberJavaScriptJavaScript Number MethodsJavaScriptClasses in JavaScript: The BasicsJavaScriptA Quick Comparison of JOIN and Subquery in SQLSQL/MySQL2 Ways We Can Write Multiple Line Commands in PHPPHPStyling Lists with CSSCSSHow to force your website to load securely with an .htaccess file?MiscellaneousSelect statement in Postgres with examplesPostgresHow to get previous days or next days in PHP?PHPCrypto.getRandomValues() method in JavaScriptJavaScript