JQuery 当第二个孩子是最后一个孩子时，最后一个孩子不起作用

Question

 <ul>
      <li class="js"><span>JavaScript</span></li>
      <li class="js"><span>Python</span></li>
      <li class="jsa"><span>Swift</span></li>
 </ul>

另请参阅链接。

我不知道我对"孩子"的理解是否正确，但在这种情况下，我认为 JavaScript 和 Python 是类为"js"的元素的两个孩子。使用$('li').filter('li.js:first-child')我可以得到"JavaScript"，但我不能使用$('li').filter('li.js:last-child')获得"Python"。

所以我认为这证明了"JavaScript"和"Python"是类"js"元素的子级。

然而，对我来说奇怪的是，当我让"Swift"有类"js"时，

 <ul>
      <li class="js"><span>JavaScript</span></li>
      <li class="js"><span>Python</span></li>
      <li class="js"><span>Swift</span></li>
 </ul>

使用$('li').filter('li.js:last-child')可以获得"Swift"

另外，我知道我可以使用 ：last，当它是第二个和最后一个同时得到"Python"时，我确实得到了"Python"。但我只是不明白为什么:last-child不适用于同样的情况。

谢谢你的时间！

Answer 1

使用 :last 而不是 last-child ，因为last-child会像ul一样查看父容器的最后一个子容器，在您的情况下，当您像现在一样这样做时，它会.jsa。另外，您不应该在没有<ul>的情况下将li附加到li中，我的意思是您可以，但这是不对的。 试试这个：

//$('li').filter('li.js:last-child')
$('.js:last').click(function() {
  $('<li><span>C#</span></li>').appendTo($('li').filter('.js'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test-div">
  <ul>
    <li class="js"><span>JavaScript</span>
    </li>
    <li class="js"><span>Python</span>
    </li>
    <li class="jsa"><span>Swift</span>
    </li>
  </ul>
</div>
Use `:last` because `last-child` select only the last-child of a parent:
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>