Sorting of divs in Jquery

Question

My code have divs of movies which are used to display movie with poster, now i want jquery to sort divs for me on basis of title,

<!-- Movie -->
            <div class="movie" title="Reservoir Dogs">                  
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0105236">Reservoir Dogs</a> |
                        Reservoir Dogs</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMTQxMTAwMDQ3Nl5BMl5BanBnXkFtZTcwODMwNTgzMQ@@._V1_SX300.jpg" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Saw">                 
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0387564">Saw</a> |
                        Saw</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMjAyNTcxNzYwMV5BMl5BanBnXkFtZTgwMzQzNzM5MjE@._V1_SX300.jpg" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Scarface">                    
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0086250">Scarface</a> |
                        Scarface</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMjAzOTM4MzEwNl5BMl5BanBnXkFtZTgwMzU1OTc1MDE@._V1_SX300.jpg" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Signs">                   
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0286106">Signs</a> |
                        Signs</span></span><img src="http://ia.media-imdb.com/images/M/MV5BNDUwMDUyMDAyNF5BMl5BanBnXkFtZTYwMDQ3NzM3._V1_SX300.jpg" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in3">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->
<!-- Movie -->
            <div class="movie" title="Stir of Echoes">                  
                <div class="movie-image">

                    <span class="play"><span class="name"><a href="/Home/MovieDetail/tt0164181">Stir of Echoes</a> |
                        Stir of Echoes</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMTU0OTAyMDQzNV5BMl5BanBnXkFtZTcwNTg1NjYyMQ@@._V1_SX300.jpg" alt="movie">
                </div>

                <div class="rating">
                    <p>RATING</p>
                    <div class="stars">

                            <div class="stars-in4">                             
                        </div>

                    </div>
                    <span class="comments"></span>
                </div>
            </div>
            <!-- end Movie -->

Now here is my current code

$(document).ready(function () {

          var desc = false;
    document.getElementById("sort").onclick = function () {
            sortUnorderedList("movie", desc);
            desc = !desc;
            return false;
        }


});
function sortUnorderedList(ul, sortDescending) {

    if (typeof ul == "string")
        var lis = document.getElementsByClassName("movie");


    var vals = [];

    for (var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i]);
    debugger;
    vals.sort(function (a, b) { return a.title - b.title });
    //vals[].title.sort();

    if (sortDescending)
        vals.reverse();

    for (var i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i].innerHTML;
}

above code is not giving desired result can u suggest better way to do it

dfsq · Accepted Answer · 2015-04-19 14:31:02Z

2

You can significantly simplify your code if you use more jQuery, anyway you are using it. Entire code in this case will be:

$(document).ready(function () {
    var desc = false;
    $("#sort").click(function () {
        sortUnorderedList("movie", desc);
        desc = !desc;
    });
});

function sortUnorderedList(ul, sortDescending) {
    $('.' + ul).sort(function(a, b) {
        return sortDescending ? a.title.localeCompare(b.title) : b.title.localeCompare(a.title);
    }).appendTo('body');
}

Just note that instead of appendTo('body'), you should append to appropriate container that holds .movie elements. I'm appending to body because this is a container for movie divs in my demo.

Demo: http://jsfiddle.net/212oc0kw/

answered Apr 19, 2015 at 14:31

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rory McCrossan Over a year ago

Great answer, but be aware that localeCompare is only supported in IE11+. You would need to implement sorting manually if you need to support older IE versions.

dfsq Over a year ago

You are welcome. Here is a version if you want to support IE<11 jsfiddle.net/212oc0kw/1

Collectives™ on Stack Overflow

Sorting of divs in Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related