sorting is not performing in jquery

Question

I am doing a sorting on div, but unable to perform a sorting. I am using jQuery.fn.sortElements. below is the html.

<div id="sortList">
    <div class="list" style="display: block;">
        <a onclick="openInfoWindow("10"); return false;" href="#"></a>
        <div class="imgClass">
            <a onclick="openInfoWindow("10"); return false;" href="#">
            <img class="innerImg" alt="" src="img">
            </a>
        </div>  
        <div class="inner">
            <div class="name">edata</div>   
        </div>
    </div>

    <div class="list" style="display: block;">
        <a onclick="openInfoWindow("10"); return false;" href="#"></a>  
        <div class="imgClass">
            <a onclick="openInfoWindow("10"); return false;" href="#">
            <img class="innerImg" alt="" src="img">
            </a>
        </div>  
        <div class="inner">
            <div class="name">fdata</div>   
        </div>
    </div>

    <div class="list" style="display: block;">
        <a onclick="openInfoWindow("10"); return false;" href="#"></a>  
        <div class="imgClass">
            <a onclick="openInfoWindow("10"); return false;" href="#">
            <img class="innerImg" alt="" src="img">
            </a>
        </div>  
        <div class="inner">
            <div class="name">cdata</div>   
        </div>
    </div>
</div>

Below is the jquery code, I have placed an alert to see the result but nothing happens.

$('.sortList').sortElements(function(a, b){
                alert($(a).find(".list").children(".inner").find(".name").text().toLowerCase())                 
                    return $(a).find(".list").children(".inner").find(".name").text().toLowerCase() > $(a).find(".list").children(".inner").find(".name").text().toLowerCase() ? 1 : -1;
                });

Any help is very much appreciated

Answer 1

Try this:

$('#sortList .list').sortElements(function(a, b){
       return $(a).children(".inner").find(".name").text().toLowerCase() > $(b).children(".inner").find(".name").text().toLowerCase() ? 1 : -1;
});

See Fiddle

Answer 2

There were a few problems:

• $('.sortList') should be $('#sortList'), '#' looks for id's with 'sortList' and '.' looks for classes with 'sortList'
• you need to call sortElements on the list of elements not the container so $('.sortList').sortElements should be $('#sortList').children(".list").sortElements
• in the return statement of the comparison function you need to compare a and b, not a with a
• also in the return statement you now don't need to look for '.list' you can go straight to '.inner'

Please see JSFiddle: http://jsfiddle.net/qwmq61o5/1/

$('#sortList').children(".list").sortElements(function(a, b) {
    return $(a).children(".inner").find(".name").text().toLowerCase() > $(b).children(".inner").find(".name").text().toLowerCase() ? 1 : -1;
});