Question

I have the following code:

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);
      });

  });

edit: i get now: uncaught exception: Syntax error, unrecognized expression: :nth-child

How to click on the nth-child using jquery and get the item number like CSS do? eg: i click on the second one, jquery will return 2

Answer 1

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

index is zero-based