Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Is it possible to partially list a HTML ordered list

I am trying to create an ordered list using CSS and the counter increment. However I only want the first five items to show the counter:

Here is the code I currently have:

    var myUnit_1 = 1;
    $(".demo1 li").css("counter-increment", "list " + myUnit_1);
.demo1 {
    counter-reset: list;
}

.demo1 li:before {
    content: counter(list);  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
</ul>

I need the list to be kept as one single list and not split in two parts.

Tags:

2

Answers


  1. 0

    You can use :nth-child() to apply a selector to a range of elements:

        var myUnit_1 = 1;
    $(".demo1 li").css("counter-increment", "list " + myUnit_1);
    .demo1 {
    counter-reset: list;
}

.demo1 li:nth-child(-n + 5):before {
    content: counter(list);  
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
</ul>
    Login or Signup to reply.
  2. 0

    Is it possible to partially list a HTML ordered list

    Yes – and you don’t need javascript for this.

    I am trying to create an ordered list

    Start with <ol> – it’s the ordered list element.

    I only want the first five items to show the counter

    You can use a combination of li:nth-of-type(n + 6) and the CSS property list-style-type.

    Working Example:

    .demo1 li:nth-of-type(n + 6) {
  list-style-type: none;
}
    <ol class="demo1">
  <li>Number</li>
  <li>Number</li>
  <li>Number</li>
  <li>Number</li>
  <li>Number</li>
  <li>No number</li>
  <li>No number</li>
  <li>No number</li>
  <li>No number</li>
</ol>

    Further Reading:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search