Блог

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

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

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, это не работает.

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

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

Убедитесь, что функция доступна в соответствующих областях. Когда функция определена внутри $(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');

        });
});