JJJJS
(Joey Joe Joe Junior Shabadoo)
August 20, 2020, 4:06am
1
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
DanW
(Dan)
August 20, 2020, 7:39am
2
Something like this may work:
CSS counters let you adjust the appearance of content based on its location in a document.
For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists.
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!
1 Like
Hello
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
6 Likes
JJJJS
(Joey Joe Joe Junior Shabadoo)
August 20, 2020, 4:41pm
4
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!
itskoyii
(Koyi Tsang)
January 31, 2023, 8:23pm
5
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!