JSFiddle - React, Tailwind, and code Playground

by phreaddee

HTML

<ul class="catalogueList">
    <li class="catalogueItem">
        <div class="shop-catalogue">
            <span class="surname"><a href="#">AAA BBBB</a></span>
                <div class="image">
                    <a href="#"><img src="#" alt="AAA BBBB" border="0" /></a>
               </div>
            <h4><a href="#">AAA BBBB</a></h4>
        </div>
    </li>
    <li class="catalogueItem">
        <div class="shop-catalogue">
            <span class="surname"><a href="#">BBB CCCC</a></span>
                <div class="image">
                    <a href="#"><img src="#" alt="BBB CCCC" border="0" /></a>
                </div>
            <h4><a href="#">BBB CCCC</a></h4>
        </div>
    </li>  
    <li class="catalogueItem">
        <div class="shop-catalogue">
            <span class="surname"><a href="#">CCC AAAA</a></span>
                <div class="image">
                    <a href="#"><img src="#" alt="CCC AAAA" border="0" /></a>
                </div>
            <h4><a href="#">CCC AAAA</a></h4>
        </div>
    </li>
</ul>

CSS

span.surname {font-size:0;}
.image, h4 {text-align:center;}

JavaScript

$('ul.catalogueList > li > div > span.surname > a').html(function(i, oldText) {
    var out = oldText.split(' ');
    out[0] = out[1]
    return out.join(' ');
});

function SortList(a, b) {

    return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

$('ul.catalogueList li').sort(SortList).appendTo('ul.catalogueList');