El selector :only-of-type es un selector incorporado en jQuery, que se utiliza para seleccionar todos los elementos que son el único hijo de su padre.
Sintaxis:
$("parent_name : only-of-type")
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use only-of-type selector -->
<script>
$(document).ready(function() {
$("p:only-of-type").css(
"color", "green");
});
</script>
</head>
<body>
<center>
<!-- Division 1 -->
<div style="border:1px solid;">
<p>Geek1 of first div.</p>
<p>Geek2 of first div.</p>
</div>
<br>
<!-- Division 2 -->
<div style="border:1px solid;">
<p>The only Geek of second div.</p>
</div>
<br>
<!-- Division 3 -->
<div style="border:1px solid;">
<span>GeeksforGeeks</span>
<p>The only Geek of third div.</p>
</div>
</center>
</body>
</html>
Producción:
En el ejemplo anterior, todos los únicos elementos secundarios (aquí etiquetas p) de sus padres (aquí etiquetas div) tienen formato de color verde, es decir, «El único geek del segundo div». y “El único Geek del tercer div.”.
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use only-of-type selector -->
<script>
$(document).ready(function() {
$("p:only-of-type").css(
"color", "green");
});
</script>
</head>
<body>
<center>
<!-- Children of division -->
<h3>Division as a parent</h3>
<div>
<p>Geek1 of div.</p>
<p>Geek2 of div.</p>
</div>
<!-- Only child of id -->
<h3>ID as a parent.</h3>
<id>
<p>The only Geek of id.</p>
</id>
<!-- Only child of class -->
<h3>Class as a parent.</h3>
<class>
<p>The only Geek of class.</p>
</class>
<!-- Only child of body -->
<h3>Body as a parent.</h3>
<p>The only Geek of body.</p>
</center>
</body>
</html>
Producción:
En el ejemplo anterior, todos los únicos elementos secundarios (aquí etiquetas p) de sus respectivos padres están formateados en color verde, es decir, «El único Geek de id», «El único Geek de la clase». y “El único Geek del cuerpo”. ya que cada etiqueta de párrafo se considera un hijo diferente para cada padre.
Publicación traducida automáticamente
Artículo escrito por vaishalichauhan3003 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA