This example describes the use of the closest () function in jquery. Share to everyone for your reference. The specific analysis is as follows:
This function starts at the element itself, recursively matches the ancestor element, and returns the first matching element.
The closest () function first checks whether the current element matches, and returns the element itself if it matches. If it does not match, look up the parent element, one level up, until you find the element that matches the selector. If nothing is found, an empty jquery object is returned.
Grammatical structure One:
Copy Code code as follows:
$ (selector). Closest (expr, context)
Parameter list:
| Parameters |
Describe |
| Expr |
An expression used to filter elements |
| Context |
Optional. As a set of DOM elements to find or a document. |
Instance code:
Example one:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>closest () function-cloud-dwelling community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Father P"). Closest ("div"). CSS ("Color", "green");
})
</script>
<body>
<div class= "Father" >
<div class= "Children" > I am div
<p> I'm grandson P</p>
</div>
<p> I am the son p</p>
</div>
<p> I'm a brother p</p>
</body>
Example two:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>closest () function-cloud-dwelling community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#children p"). Closest ("#father", document.getElementById ("Children")).
CSS ("Border", "1px solid Red");
})
</script>
<body>
<div id= "Father" >
<div id= "Children" >
<p> I'm grandson P</p>
</div>
<p> I am the son p</p>
</div>
<p> I'm a brother p</p>
</body>
Because a div with ID father is not within a DIV with an ID of children, its border cannot be set to red.
Grammatical structure two:
Copy Code code as follows:
$ (selector). Closest (Element)
Parameter list:
| Parameters |
Describe |
| Element |
The DOM element or jquery element used to match the element. |
Instance code:
Example one:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>closest () function-cloud-dwelling community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#children p"). Closest (document.getElementById ("Children")).
CSS ("Border", "1px solid Red");
})
</script>
<body>
<div id= "Father" >
<div id= "Children" >
<p> I'm grandson P</p>
</div>
<p> I am the son p</p>
</div>
<p> I'm a brother p</p>
</body>
Example two:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>closest () function-cloud-dwelling community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#children p"). Closest ($ ("#children")). CSS ("Border", "1px solid Red");
})
</script>
<body>
<div id= "Father" >
<div id= "Children" >
<p> I'm grandson P</p>
</div>
<p> I am the son p</p>
</div>
<p> I'm a brother p</p>
</body>
I hope this article will help you with your jquery programming.
