Div sort. with content from another page

I'm trying the following:

Get content from another page and then sort it. I'm having problems with the script "seeing" the content.

JQUERY:

 <script type="text/javascript">
        $(document).ready(
            function(){
            $.get('test.php', function(receivedHtml) {
                var neededHtml=$(receivedHtml).find('.news_date-1').html();
                $('#news_date-1').append(neededHtml);
            });
            $.get('test.php', function(receivedHtml) {
                var neededHtml=$(receivedHtml).find('.news_date-2').html();
                $('#news_date-2').append(neededHtml);
            });
            $.get('test.php', function(receivedHtml) {
                var neededHtml=$(receivedHtml).find('.news_date-3').html();
                $('#news_date-3').append(neededHtml);
            });开发者_运维技巧
            function sortDescending(a, b) {
             var date1  = $(a).find(".year").text();
               date1 = date1.split('-');
             date1 = new Date(date1[2], date1[1], date1[0]);
             var date2  = $(b).find(".year").text();
               date2= date2.split('-');
             date2= new Date(date2[2], date2[1], date2[0]);

             return date1 < date2 ? 1 : -1;
            };
            $('#all_elements .news-item').sort(sortDescending).appendTo('#all_elements');
        });         

    </script>

TEST.php

<div class="news_date-1" title="01 - Nieuws datum">20-11-2009</div>
<div class="news_date-2" title="02 - Nieuws datum">30-11-2012</div>
<div class="news_date-3" title="03 - Nieuws datum">01-05-2000</div>

Destenation.html

<div id="all_elements">
<div class="news-item">
    <div id="news_date-1" class="year"></div>
</div>  

<div class="news-item">
    <div id="news_date-2" class="year"></div>
</div>

<div class="news-item">
    <div id="news_date-3" class="year"></div>
</div>
</div>

The sorting on his own works just fine (that is, when i put a date dirctly in to the div) But when i use it with the $get it doesn't work.

Any help?

You don't have to request the same page three times. Instead, use one request and use the response for every operation.

Make sure that the function is available at the relevant scope(s). When a function is defined within $(document).ready(function(){}), it's not available to the code outside the $(document).ready() wrapper.

Notes:

• neededHtml.find(".news_date-1") is equivalent to $(".news_date-1", neededHtml)
• The .sort() function's return value should not be -1 or 1. Instead, substract both values from each other.
• $("<div>Een</div><div>Twee</div>").html() returns the html inside the first element: "Een".
  The HTML has to be appended to a container before you're able to use .find() as expected: $("<div>").append(html)
• $(..).append(html) - Variable html can either be a string, or a JQuery / DOM object. You don't have to use .html() before appending, unless you want to create a copy of the elements.

Fiddle: http://jsfiddle.net/zZT7S/

Optimized code:

$(document).ready(function(){
        function sortDescending(a, b) {
            var date1 = $(".year", a).text().split("-");
            date1 = new Date(date1[2], date1[1], date1[0]);
            var date2 = $(".year", b).text().split("-");
            date2 = new Date(date2[2], date2[1], date2[0]);
            return date1 - date2;
            /* date1 - date2 = 2000, 2009, 2012. To get the reverse order, use:
             return date2 - date1;
            */
        };
        //
        $.get('test.php', function(html) {
            var neededHtml = $("<div>").append(html);
            var neededHtml1 = $('.news_date-1', neededHtml);
            $('#news_date-1').append(neededHtml1);
            var neededHtml2 = $('.news_date-2', neededHtml);
            $('#news_date-2').append(neededHtml2);
            var neededHtml3 = $('.news_date-3', neededHtml);
            $('#news_date-3').append(neededHtml3);
            $('#all_elements .news-item').sort(sortDescending).appendTo('#all_elements');

        });
});