CODEWITHSUNDEEP
javascriptjqueryhtml
Shahjad Ahmed
Shahjad Ahmed

Reputation: 51

How to Hide Last Three li form ul?

I want to hide first two li from ul I am using like 

  <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>

But When I am trying to hide using JQUERY I am facing a problem it is including sub-list also.

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

But I want result like this

<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>

Upvotes: 1

Views: 1017

Answers (4)

hitesh makodiya
hitesh makodiya

Reputation: 437

Use this line : $('.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>

Upvotes: 2

brk
brk

Reputation: 50326

Use css nth selector where n is 0,1,2.... so in first case it will be -0+2 , in second case it will be -1+2 and 

.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>

Upvotes: -1

Imad
Imad

Reputation: 7490

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

Upvotes: -1

Imad
Imad

Reputation: 7490

Why script when css can do it? :)

.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>

Upvotes: 1

Related Questions