Question

我想从正在使用的ul中隐藏前两个li

<script type="text/javascript">
  $('.newade').find("li:gt(1)").hide();
</script>

但是当我尝试使用JQUERY隐藏时，我遇到了一个问题，它也包含了子列表。

<ul class="newade">
   <li>
     <ul>
       <li>sub1</li>
       <li>sub2</li>
       <li>sub3</li>
     </ul>
   </li>
   <li>Two</li>
   <li style="display:none;">Three</li>
   <li style="display: none;">Four</li>
   <li style="display: none;">Five</li>
</ul>

但是我想要这样的结果

Service1

Answer 1

使用此行： $（'。newade> li：not（：lt（2））'）。hide（）;

$('.newade > li:not(:lt(2))').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="newade">
            <li>
                <ul>
                    <li>sub1</li>
                    <li>sub2</li>
                    <li>sub3</li>
                </ul>
            </li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ul>

Answer 2

为什么CSS脚本可以做到这一点？：）

.newade>li:nth-child(1), .newade>li:nth-child(2) {
  display:none;
}

.newade>li:nth-child(1), .newade>li:nth-child(2) {
  display:none;
}

 <ul class="newade">
   <li>
     <ul>
       <li>sub1</li>
       <li>sub2</li>
       <li>sub3</li>
     </ul>
   </li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

Answer 3

.newade>li:nth-child(1), .newade>li:nth-child(2) {
  display:none;
}

Answer 4

使用css nth selector，其中n为0,1,2 ....，因此在第一种情况下为-0 + 2，在第二种情况下为-1 + 2和

.newade li:nth-child(-n+2) {
  display: none;
}

<ul class="newade">
  <li>
    <ul>
      <li>sub1</li>
      <li>sub2</li>
      <li>sub3</li>
    </ul>
  </li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

如何隐藏最后三个li ul？

4 个答案: