Div сортировать. с контентом с другой страницы

Question

Я пытаюсь следующее:

Получить содержимое с другой страницы, а затем отсортировать его. У меня проблемы со скриптом "просмотра" контента.

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>

Сортировка по его собственным работам просто отлично (то есть, когда я прямо указываю дату в div) Но когда я использую его с $ get, он не работает.

Любая помощь?

Answer 1

Вам не нужно запрашивать одну и ту же страницу три раза. Вместо этого используйте один запрос и используйте ответ для каждой операции.

Убедитесь, что функция доступна в соответствующих областях. Когда функция определена в $(document).ready(function(){}), она не доступна для кода вне оболочки $(document).ready().

Примечания:

• neededHtml.find(".news_date-1") эквивалентно $(".news_date-1", neededHtml)
• Возвращаемое значение функции .sort() должно не быть -1 или 1. Вместо этого вычтите оба значения друг из друга.
• $("<div>Een</div><div>Twee</div>").html() возвращает html внутри первого элемента: "Een".
  HTML-код необходимо добавить в контейнер, прежде чем вы сможете использовать .find() в качестве ожидается: $("<div>").append(html)
• $(..).append(html) - Переменная html может быть либо строкой, либо объектом JQuery / DOM. Вам не нужно использовать .html() перед добавлением, , если вы не хотите создать копию элементов.

Скрипка: http://jsfiddle.net/zZT7S/

Оптимизированный код:

$(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');

        });
});