Sort jQuery elements

Trying to figure out a more scalable solution to sorting DOM elements using jQuery

by Alin Guta

HTML

<h1>Demo</h1>
        
        <p>Click on the headers (fruit/quantity).</p>
        
        <table>
            <thead>
                <tr>
                    <th>Fruit</th>
                    <th>Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Grape</td>
                    <td>15</td>
                </tr>
                <tr>
                    <td>Apple</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Banana</td>
                    <td>88</td>
                </tr>
                <tr>
                    <td>Orange</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>Melon</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>Tomato</td>
                    <td>36</td>
                </tr>
            </tbody>
        </table>
        
        <button>Click to sort the list below</button>
        
        <ul>
            <li>Lamborghini</li>
            <li>Farrari</li>
            <li>Masarati</li>
            <li>Aston Martin</li>
            <li>Porche</li>
        </ul>

JavaScript

jQuery.fn.sort = (function(){
    
    var sort = [].sort;
    
    return function(comparator, getSortable) {
        
        getSortable = getSortable || function(){return this;};
        
        var placements = this.map(function(){
            
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
                
                // Since the element itself will change position, we have
                // to have some way of storing it's original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
            
            return function() {
                
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
                
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
                
            };
            
        });
       
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
        
    };
    
})();


var th = jQuery('th'),
                li = jQuery('li'),
                inverse = false;
            
            th.click(function(){
                
                var header = $(this),
                    index = header.index();
                    
                header
                    .closest('table')
                    .find('td')
                    .filter(function(){
                        return $(this).index() === index;
                    })
                    .sort(function(a, b){
                        
    ...