Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to sort div's by content date

I'm trying to sort div's by content date... What i've got is sorting. But not by date...

HTML

 <div id="all_elements">

            <!-- one element -->
            <div class="element">
                    <div class="display-number">02</div>
                    <div class="year">20-10-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">03</div>
                    <div class="year">22-09-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">01</div>
                    <div class="year">01-12-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">04</div>
                    <div class="year">01-06-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">05</div>
                    <div class="year">01-06-2010</div>
            </div><!-- element -->

        </div> <!--all_elements-->

JQUERY

<script>
        function sortDescending(a, b) {
            return $(a).find(".year").text() < $(b).find(".year").text() ? 1 : -1;
        };
        $(document).ready(function() {
            $('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
        }); 
    </script>

I know i need a function to figure out the content is a date.. Just don't know how...

Who can help me out?

like image 949
ronni Avatar asked Oct 12 '11 14:10

ronni


People also ask

How do I sort a Div in a JavaScript array?

You don’t need to create so many arrays. You can just get a reference to all of the divs you want to sort, then use JavaScript’s native .sort () function.

How to sort the HTML elements like lists?

We can sort the HTML elements like lists or any other using the data attribute. The data attribute consists of 2 parts which are the prefix and suffix, the prefix data-is compulsory and the suffix of data-can be any custom name that relates the data in the elements, and it should be of at least one character of lowercase.

How does the sort () method work in JavaScript?

The sort () method sorts the elements of an array in place and returns the sorted array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.


1 Answers

You could do:

   function sortDescending(a, b) {
     var date1  = $(a).find(".year").text();
       date1 = date1.split('-');
     date1 = new Date(date1[2], date1[1] -1, date1[0]);
     var date2  = $(b).find(".year").text();
       date2= date2.split('-');
     date2= new Date(date2[2], date2[1] -1, date2[0]);

     return date1 < date2 ? 1 : -1;
    };
    $(document).ready(function() {
        $('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
    }); 

EDIT - corrected the typo according to the comment! Fiddle here http://jsfiddle.net/TsZeg/

like image 187
Nicola Peluchetti Avatar answered Sep 30 '22 16:09

Nicola Peluchetti