El jQuery
nth-child()básicamente dice: ‘ Seleccione el hijo del padre cuyo índice se proporciona dentro del enésimo hijo () ‘. En jQuery, el índice comienza con 1 y no con 0 como en C #.
Creemos un pequeño ejemplo que muestre “cómo usar nth-child() dinámicamente en jQuery”.
Supongamos que tengo un elemento ul que contiene 10 li niños dentro de él. Este código se parece a lo que he mostrado a continuación:
- ¿Cuáles son algunas de las mejores prácticas para CSS?
- ¿Cuál es la mejor manera para mí de comenzar a contribuir a JS?
- ¿Qué se entiende por AngularJS y Angular?
- ¿Qué función se usa para iniciar manualmente una aplicación AngularJS? ¿Es necesario?
- ¿Dónde puedo aprender cómo crear un enlace de descarga desde la ruta guardada en la base de datos en PHP?
- Primero
- Segundo
- Tercero
- Cuarto
- Quinto
- Sexto
- Séptimo
- Ocho
- Noveno
- Décimo
Agreguemos un elemento de entrada en el que los usuarios ingresarán el índice de la lista para su selección.
También tengo un botón que al hacer clic convertirá el li dado en rojo.
Aquí nth-child() para seleccionar el li .
Entonces, al hacer clic en el botón, así es como se usa nth-child() .
$ ("# styleButton"). click (function (e) {
$ ("# myUL li: nth-child (" + $ ("# enterInput"). val () + ")"). css ("color", "red");
});
Observe que paso el val () de la entrada dentro del nth-child () dinámicamente. Para convertir el color li a rojo, he usado el método jQuery CSS.
También he creado un pequeño video para mostrar cómo funcionará todo esto en jQuery. Haga clic en la imagen de abajo para ver este video.
Espero poder explicar claramente cómo funciona el código jQuery anterior. Si te gusta mi respuesta, dame un visto bueno al votarla.
Gracias y Saludos,
Naina
Desarrollador Web Senior – Accenture London.
