Is it possible to append a unique CSS class to multiple <li> elements, or re-sort them using Jquery?

Question

Currently working on the Squarespace.com platform and I'd like to re-sort a dynamic Blog Category index that defaults to alphabetical sorting. This is how Squarespace generates the code:

<div id="moduleContentWrapper11663355" class="widget-wrapper widget-type-journalarchive">
    <div id="moduleContent11663355">
        <ul class="archive-item-list-pt">
            <li>
            <a href="/blog/category/category-one">Category One</a>
            <span class="entry-count">(1)</span>
            </li>
            <li>
            <a href="/blog/category/category-two">Category Two</a>
            <span class="entry-count">(1)</span>
            </li>
            <li>
            <a href="/blog/category/category-three">Category Three</a>
            <span class="entry-count">(1)</span>
            </li>
        </ul>
    </div>
</div>

Is it possible to re-sort the entries using Jquery, or worse case, can I append a unique CSS class to each <li> so I can manipulate each one using CSS?

Thanks!

Answer 1

var i = 1;
$('.archive-item-list-pt li').each(function(item) {
   $(item).addClass('myClass'+i);
});