El :nth-of-type() es un selector incorporado en jQuery , que se usa para seleccionar todos los elementos nth-child del padre especificado.
Sintaxis:
parent_name : nth-of-type(n|even|odd|algebraic equation)
Parámetros: Toma un parámetro n | incluso | impar | ecuación algebraica.
| Valor | Descripción |
|---|---|
| norte | Seleccione el niño presente en el índice n (a partir de 1). n debe ser un número entero. |
| incluso | Selecciona el niño presente en el índice par. |
| extraño | Selecciona el niño presente en el índice impar. |
| ecuación algebraica | Seleccione el niño presente en el valor de la ecuación, la ecuación debe ser del tipo mn + c o mn – c, donde m y c son valores constantes. |
Nota:
- Los elementos secundarios en diferentes secciones o divisiones se tratan de manera diferente
, es decir, la indexación comienza desde el principio. - En mn + c, n comienza desde el valor 0.
Ejemplo-1: Uso de n como parámetro.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p:nth-of-type(2)").css(
"color", "green");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements start
from beginning inside new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
</section>
<!--Outside the section the index of
the child element remain same as
before section tag-->
<p>Geeks 3</p>
</body>
</html>
Producción:
En el ejemplo anterior, el elemento secundario en el índice 2 (el padre es la etiqueta p) tiene formato de color verde, es decir, «Geeks 2» y «geeks for geeks 2».
Ejemplo-2: Usar even como parámetro.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).mouseover(function() {
$("p:nth-of-type(even)").css(
"background-color", "green");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements start
from beginning inside new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
</section>
<!--Outside the section the index of the
child element remain same as before section tag-->
<p>Geeks 3</p>
</body>
</html>
Producción:
En el ejemplo anterior, elemento secundario en índices pares (el padre es la etiqueta p) formateado en un fondo de color verde, es decir, «Geeks 2» y «geeks for geeks 2».
Ejemplo-3: Uso impar como parámetro.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).mouseover(function() {
$("p:nth-of-type(odd)").css(
"color", "red");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements
start from beginning inside new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
</section>
<!--Outside the section the index
of the child element remain
same as before section tag-->
<p>Geeks 3</p>
</body>
</html>
Producción:
En el ejemplo anterior, elemento secundario en índices impares (el padre es la etiqueta p) formateado en color rojo, es decir, «Geeks 1», «geeks for geeks 1», «geeks for geeks 3» y «Geeks 3».
Ejemplo-4: Uso de una ecuación algebraica como parámetro.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).mouseover(function() {
$("p:nth-of-type(3n+2)").css(
"color", "green");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements
start from beginning inside
new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
<p>geeks for geeks 4</p>
<p>geeks for geeks 5</p>
</section>
<!--Outside the section the index
of the child element remain
same as before section tag-->
<p>Geeks 3</p>
</body>
</html>
Producción:
En el ejemplo anterior, el elemento secundario en el valor de los índices es igual a 3n + 2 (el padre es la etiqueta p) formateado en color verde, es decir, «Geeks 2», «geeks para geeks 2», «geeks para geeks 5».
Publicación traducida automáticamente
Artículo escrito por AmanAgarwal6 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA