23 votos

click de jQuery nth-child

Tengo el siguiente código:

CSS:

nav div:nth-child(1) { background: red; }
nav div:nth-child(2) { background: blue; }
nav div:nth-child(3) { background: yellow; }

HTML:

<nav>
 <div>item #1</div>
 <div>item #2</div>
 <div>item #3</div>
</nav>

jQuery:

  $(document).ready(function() {

      $('.nav div:nth-child').click(function) {
          console.log(this);
      });

  });

Edición: obtener ahora: excepción: error de sintaxis, la expresión no reconocida:: nth-child

¿Cómo a haga clic en el enésimo niño utilizando jquery y obtener el número de artículo como CSS hacen? por ejemplo: hago clic en el segundo de ellos, jquery devolverá 2

31voto

hope_is_grim Puntos 1589
$(document).ready(function() {
  $('.nav div').click(function() {
      var index = $(this).index();
      console.log(index);
  });
});

índice está basado en cero

0voto

Overflowed Puntos 86

El "nav div:nth-child(123)" es un jQuery selector, que sólo es aplicable si quería específicamente seleccionar uno de ellos. Decir, por ejemplo, que quería manejar cada clic de forma totalmente independiente, como se hace con CSS (tres reglas de tres .haga clic en()'s).

Simplemente desea seleccionar todos los div de navegación, pero luego de averiguar dónde se encuentra en posición. Usted puede hacer esto mediante la restando el número de elementos por el número de elementos después de haber seleccionado uno:

$(document).ready(function() {

    $('nav div').click(function() {
        var nth_child = $(this).parent().children().length - $(this).nextAll().length;
        console.log(nth_child);
    });

});

0voto

Jordan Puntos 12780

Tal vez alguien sabe enésimo hijo más que a mí, pero la manera en que yo haria es como este:

$('nav div').click(function() {
    var index = $('div').index($(this).parents('div'));
});

Como una nota del lado, "nav" probablemente se supone que será algo parecido .nav o #nav.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X