Question

I have some JavaScript that toggles the class of the th element clicked to “ascending” or “descending”.

Q: In the css, how can I display a jQuery-UI icon associated with .ascending or .descending?

<table>
<thead>
<tr>
<th class="ascending">Cust</th>
<th>Name</th>
</tr>
</thead>
...
</table>

Here’s the code, just in case someone spots an inefficiency:

jQuery(function($) {
    $('.thSort th').click(function() {
        var $th = $(this);
        $th.siblings().removeClass('selected ascending descending');
        $th.addClass('selected');
        var column = $th.index();
        var $table = $th.closest('table');
        var rows = $table.find('tbody > tr').get();

        if ($th.hasClass('ascending')) {
            $th.removeClass('ascending');
            $th.addClass('descending');
            rows.sort(function(rowA,rowB) {
                var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
                var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
                if (keyA < keyB) return 1;
                if (keyA > keyB) return -1;
                return 0;
            });
        } else {
            $th.removeClass('descending');
            $th.addClass('ascending');
            rows.sort(function(rowA,rowB) {
                var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
                var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
                if (keyA < keyB) return -1;
                if (keyA > keyB) return 1;
                return 0;
            });
        }
        $.each(rows, function(index,row) {
          $table.children('tbody').append(row);
        });
        return false;
    });
});

Answer 1

<th scope="col"><div class="floatleft">Topic</div>
<div class="floatright ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-triangle-n"></span>
</div>
</th>

In JavaScript, toggle between ui-icon-circle-triangle-n and ui-icon-circle-triangle-s.
If the user clicks on a new th, replace all the html inside the previous th with only the text that is in the first div.