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()返回里面的第一个元素：“Een”。在您能够按预期使用.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');

        });
});

Div排序。来自其他页面的内容

1 个答案:

注意：

优化代码：