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

How to create a hierarchy with numbers in the table of contents jquery?

I have a subheading structure:

<h2>Red Fruits</h2>
<h3>Apple</h3>
<h3>Raspberry</h3>
<h2>Orange Fruits</h2>
<h3>Orange</h3>
<h3>Tangerine</h3>
<h2>Vegetables Which Are Actually Fruits</h2>
<h3>Tomato</h3>
<h3>Eggplant</h3>

The script automatically creates a table of contents: https://jsfiddle.net/voxtermen/t5nkjbvo/2/

The result looks like this:

1. Red Fruits
    2. Apple
    3. Raspberry
4. Orange Fruits
    5. Orange
    6. Tangerine
7. Vegetables Which Are Actually Fruits
    8. Tomato
    9. Eggplant

I want to get this result:

1. Red Fruits
    1.1 Apple
    1.2 Raspberry
2. Orange Fruits
    2.1 Orange
    2.2.Tangerine
3. Vegetables Which Are Actually Fruits
    3.1 Tomato
    3.2 Eggplant

What needs to be fixed in the code for this?

I tried using this script

(function($){

    function tableContentPost(){
        var tocList = $('#toc-list');

        $('.page-content').find('h2, h3').each(function(index) {
        var heading = $(this);
        var title = heading.text();
        var id = 'heading' + index;

        // Assign an ID to the heading if it doesn't have one
        if (!heading.attr('id')) {
        heading.attr('id', id);
        } else {
        id = heading.attr('id');
        }

        var listItem = $('<li></li>').html('<a href="#' + id + '">' + title + '</a>');

        if (heading.is('h3')) {
        listItem.addClass('sub-item');
        }

        tocList.append(listItem);
        });
    }
    
       $(document).ready(function() {
        tableContentPost();
    });

})( jQuery );
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Done:

    (function($) {

    function tableContentPost() {
        var tocList = $('#toc-list');
        var counter = 1;
        var subCounter = 0;

        $('.page-content').find('h2, h3').each(function(index) {
            var heading = $(this);
            var title = heading.text();
            var id = 'heading' + index;

            // Assign an ID to the heading if it doesn't have one
            if (!heading.attr('id')) {
                heading.attr('id', id);
            } else {
                id = heading.attr('id');
            }

            var listItem = $('<li></li>').html('<a href="#' + id + '">' + title + '</a>');

            if (heading.is('h2')) {
                listItem.attr('data-counter', counter);
                counter++;
                subCounter = 1;
            } else if (heading.is('h3')) {
                var parentCounter = counter - 1;
                listItem.attr('data-counter', parentCounter + '.' + subCounter);
                listItem.addClass('sub-item');
                subCounter++;
            }

            tocList.append(listItem);
        });

        // Update list items with the correct numbering
        tocList.find('li').each(function() {
            var listItem = $(this);
            var counter = listItem.attr('data-counter');
            listItem.prepend(counter + ' ');
        });
    }

    $(document).ready(function() {
        tableContentPost();
    });

})(jQuery);

  2. 0

    Just change padding to margin:

    li.sub-item {margin-left:20px}

    The numbers don’t belong to a list item’s content, so using padding you move a list item’s content away from its number. margin though moves the whole list item from the edge of the <ol>.

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

Back To Top
Search