Question

我注意到$( 'filter:last' )与jQuery中的$( 'filter:last-child' )不同。

我尝试了jQuery文档，但很难理解其他目的:last的用途以及它们存在的原因。

显然，:last是一个jQuery扩展，而不是CSS规范。所以，我想到了它与传统:last-child的不同之处。此外，jQuery中恰好有一个.last()方法据说比$( 'filter:last' )更有效，那么:last选择器有什么用？

Answer 1

他们非常相似。不同之处在于，如果您有类似

的内容

<div>
  <p>hi</p>
  <p>bye</p>
</div>
<div>
  <p>hi</p>
  <p>bye</p>
</div>

$('p:last-child')将同时选择<p>bye</p>个元素，而$('p:last')将仅选择第二个元素。通过添加$('p').last()作为选择器jQuery允许使用带有:last的过滤器而不必使用:last的参数，同样可以使用function myDecorator(target: any, key: string) { if (!target.__pros__) { target.__pros__ = [] } target.__pros__.push(key); } Class A { @myDecorator name: string; } const obj = new A(); console.log("field with decorator on : ", a["__pros__"]);来完成同样的事情。过滤是一种功能。

Answer 2

：最后选择器匹配只有一个元素，：last-child 可以匹配多个：每个父元素一个。< / p>

有关更好的说明，请参阅下面的示例 -

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>last-child demo</title>
  <style>
 span.solast {
   text-decoration: line-through;
  }
 </style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>
<body>

<div>
 <span>John,</span>
 <span>Karl,</span>
 <span>Brandon,</span>
 <span>Sam</span>
</div>
 <div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
 </div>
<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>

<table>
  <tr><td>Second Table First Row</td></tr>
  <tr><td>Second Table Middle Row</td></tr>
  <tr><td>Second Table Last Row</td></tr> 
</table>


<script>
$( "div span:last-child" )
 .css({ color:"red", fontSize:"80%" })
 .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });

$( "table tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" 
});
</script>

</body>
</html>

你可以在上面的代码中看到：最后一个选择器改变了背景颜色只有一个tr的黄色而不是两个tr，这意味着：last只选择单个元素。然而：last-child将选择最后一个孩子的每个元素。

：last vs：last-child选择器

2 个答案: