jQuery traversal parent() method

jQuery is a collection object. If you want to quickly find the parent element of each element in the collection (this can be understood as the father-son relationship), you can use the parent() method at this time

Because is the parent element, this method will only search one level upward

Understand the node search relationship:

Find the parent element div of ul, $ (ul).parent(), is such a simple expression

parent() has no parameters

The parent() method allows us to search for the parent elements of these elements in the DOM tree, Match elements in order and create a new jQuery object based on the matched elements

Note: jQuery is a collection object, so parent is the parent element of each element in the matching collection

parent() method selectively accepts the same type of selector expression

Similarly because jQuery is a collection object, it may be necessary to filter this collection object to find the target element, so it is allowed to pass An expression of a selector

Let’s look at an example

<!DOCTYPE html>
<html>
<head>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

  <div><p>Hello</p></div>
  <div class="selected"><p>Hello Again</p></div>

<script>
  $("p").parent(".selected").css("background", "yellow");
</script>

</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div> <script> $("p").parent(".selected").css("background", "yellow"); </script> </body> </html>

submit Reset Code

Automatic operation

jQuery traversal parent() method

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]