jQuery 点击在 li:nth-child() 中不起作用

Question

我想为其他li:nth-child 制作动画，但它不起作用。所以首先我有

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

所以第一个孩子将移动第二个孩子。这是jquery，但我不知道这是否正确。

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

这是我的DEMO

Answer 1

使用:nth-of-type 而不是:nth-child（nth-child(2) 表示您想要访问li 的第二个子元素null，因为您只有一个元素）

animate 中的 left 属性不会执行任何操作，除非 a 子级具有绝对位置。

css

a {
  position: absolute;
}

js

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