jQuery click don't work in li:nth-child()-CodePudding

I want to animate other li:nth-child but it doesn't work. So first I have

<li><a href="#"> H </a></li>
<li><a href="#"> A </a></li>
<li><a href="#"> B </a></li>
<li><a href="#"> C </a></li>

so first child will move the second child. This is the jquery but I don't know if this is right.

$('li:nth-child(1) a').click(function() {
   $('li:nth-child(2) a').animate({
      left: '100px',
   });
});

Here is my DEMO

CodePudding user response：

~~Use :nth-of-type instead of :nth-child (nth-child(2) means you want to access the second child of li which is null as you only have one element)~~

The left property in animate won't do anything unless the a child has position absolute.

css

a {
  position: absolute;
}

$('li:nth-of-type(1) a').click(function(e) {
    $('li:nth-of-type(2) a').animate({
        left: '100px',
    });
});