jquery nth-child click

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