El más cercano() es un método incorporado en jQuery que devuelve el primer antepasado del elemento seleccionado en el árbol DOM. Este método atraviesa hacia arriba desde el elemento actual en la búsqueda del primer antepasado del elemento. Document Object Model (DOM) es un estándar del World Wide Web Consortium. Esto define para acceder a elementos en el árbol DOM.
Sintaxis:
$(selector).closest(para1, para2);
Parámetro: Acepta dos parámetros que se especifican a continuación:
- para1: Esto especifica el elemento para narrar la búsqueda de antepasados en el árbol DOM.
- para2: Este es un elemento DOM de parámetro opcional dentro del cual se encuentra un elemento coincidente.
Valor devuelto: Devuelve el primer antepasado del elemento seleccionado.
Código #1:
En el siguiente código, no se pasa el parámetro opcional.
<html>
<head>
<style>
.main * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
<!-- here is the script code for performing the method -->
$(document).ready(function() {
$("span").closest("ul").css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body class="main">
This is great-great grand parent element !
<div style="width:600px;">
This is great grand parent element !
<ul>
This is the second ancestor element !
<ul>
<!-- This element will be selected -->
This is first ancestor element !
<li>This is direct parent !
<span>This is span the child element !</span>
</li>
</ul>
</ul>
</div>
</body>
</html>
Salida: 
Código #2:
En el siguiente código, el parámetro opcional se pasa al método.
<html>
<head>
<style>
.main * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
<!--Here among dom id first ancestor will select -->
var item = document.getElementById("dom");
$("li").closest("ul", item).css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body class="main">
This is great-great-grandparent !
<div style="width:500px;">
div (great-grandparent)
<ul id="dom">
This is second ancestor !
<ul id="dom">
This is first ancestor !
<li>This is direct parent !
<span>This is span the child one !</span>
</li>
</ul>
</ul>
</div>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA