JQuery Traversal – Descendants

Source: Internet
Author: User

Descendants are children, grandchildren, great-grandchildren and so on.

With JQuery, you can traverse the DOM tree down to find the descendants of an element.

Walk down the DOM tree

Here are two jQuery methods for traversing the DOM tree down:

    • Children ()
    • Find ()
JQuery Children () method

The Children () method returns all the immediate child elements of the selected element.

The method will only traverse the DOM tree down one level.

The following example returns all the immediate child elements of each <div> element:

Instance $ (document). Ready (function () {
$ ("div"). Children ();
});
Try it?

You can also use optional parameters to filter the search for child elements.

The following example returns all the <p> elements of the class named "1", and they are the immediate child elements of <div>:

Instance $ (document). Ready (function () {
$ ("div"). Children ("p.1");
});
Try it?

tip: in the field of jquery programming in this site, you can practice: jquery uses children () to manipulate child elements!

JQuery Find () method

The Find () method returns the descendant elements of the selected element, all the way down to the last descendant.

The following example returns all <span> elements that belong to <div> descendants:

Instance $ (document). Ready (function () {
$ ("div"). Find ("span");
});
Try it?

The following example returns all descendants of <div>:

Instance $ (document). Ready (function () {
$ ("div"). Find ("*");
});
Try it?

JQuery Traversal – Descendants

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.