jquery - 最多只有四个 li，使用 Jquery 删除其余部分？

Question

我如何从 class="Mr Richard Has Many of Trees" 开始，然后朝着 class="MrContent" 前进，找到 class="Stuff" 并确保只显示四个 li 而最后一个 li 被删除？

我正在尝试学习 Jquery，但仍然无法理解它。

<div id="SS5" class="Mr Richard Has Lots of Trees">
<h2>Hello</h2>
<div class="MrContent">
<ul class="Stuff">
<li style="width: 178px; height: 273px;">
<li style="width: 178px; height: 273px;">
<li style="width: 178px; height: 273px;">
<li style="width: 178px; height: 273px;">
<li style="width: 178px; height: 273px;"> //delete extra one
<li style="width: 178px; height: 273px;"> //delete extra one
</ul>
</div>
</div>

这是我到目前为止所拥有的，但它不起作用。

<script type="text/javascript">
  $(document).ready(function() {
    $(.'Mr Richard Has Lots of Trees').$(.'MrContent').$(.'#Stuff li:gt(4)').remove();
  });
</script>

上面的代码应该删除最后一个吧？

Answer 1

jQuery 对象中没有$方法。您将使用以下find方法：

$('.Mr.Richard.Has.Lots.of.Trees').find('.MrContent').find('.Stuff li:gt(4)').remove();

但是，您可以使用带有后代运算符（空格）的单个选择器来定位元素：

$('.Mr.Richard.Has.Lots.of.Trees .MrContent .Stuff li:gt(4)').remove();