El selector :has() en jQuery se usa para seleccionar todos los elementos que tienen uno o más elementos dentro de ellos, que coincidan con el selector especificado.
Sintaxis:
$(":has(selector)")
Parámetro: este selector contiene un selector de parámetro único que es obligatorio y se usa para especificar el elemento a seleccionar. También se requiere aceptar cualquier tipo de selector.
Ejemplo 1: este ejemplo utiliza el selector :has para seleccionar el elemento de intervalo <h2> para crear un borde verde sólido.
<!DOCTYPE html>
<html>
<head>
<title>jQuery :has() Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use :has selector -->
<script>
$(document).ready(function(){
$("h2:has(span)").css("border", "solid green");
});
</script>
</head>
<body>
<center>
<h1 id="geeks1" style = "color:green;">GeeksForGeeks</h1>
<h2 id="geeks2"><span>jQuery :has() Selector</span></h2>
</center>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa :has selector para seleccionar el elemento y crear un borde.
<!DOCTYPE html>
<html>
<head>
<title>jQuery :has() Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use :has selector -->
<script>
$(document).ready(function(){
$("body:has(h1, span)").css("border", "solid green");
});
</script>
</head>
<body>
<center>
<h1 id="geeks1" style = "color:green;">GeeksForGeeks</h1>
<h2 id="geeks2"><span>jQuery :has() Selector</span></h2>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA