Dynamic Collection List Item Numbers

Hi,

I would like to display a number for each item in a collection list. In the screenshot below, the item numbers would be on the left where the number 1 currently is.

Each time I update the list, I want the newest item to get assigned number 1 and the older item numbers to get incremented.

Can you please advise a convenient and simple way to do this (apart from switching to an ordered list)?


Here is my public share link. The issue is on the “Publications” page: Webflow - OMNI Lab Webpage

Thanks in advance!

1 Like

Something like this may work:

Or you could look into using jQuery to increment the string based on the number of child elements index - search on stackexchange, it’s your friend! :wink:

1 Like

Hello :slight_smile:

Try this adding this snippet into the body tag (footer code)

<script>
$('.pubs_number').html(function(i) {
  return 1 + i + '.';
});
</script>

I also noticed you had style’s in your body tag (footer code). CSS styles in your site should always goes in the head code.

To note: custom scripts will only appear on the published site :slight_smile:

6 Likes

Thank you for the suggestion.

It took me a while to realize that the script won’t execute until it’s published. Now that I know this, the script works beautifully!

Thanks a lot!

For those who wants to add a ‘0’ in front of the number if it’s less than 10, here’s the code!

$('.pubs_number').html(function(i) {
  let num = 1 + i;
  return num < 10 ? '0' + num : num;
});

2 Likes

You read my mind, damn! Thanks!