javascript中ajax滚动内容的排序_Javascript_Jquery_Css_Ajax_Sorting

javascript中ajax滚动内容的排序

javascript jquery css ajax sorting

javascript中ajax滚动内容的排序,javascript,jquery,css,ajax,sorting,Javascript,Jquery,Css,Ajax,Sorting,我有大约1000条记录要以div显示。我以20个为一捆的方式显示它们，当您滚动到底部时，将加载下20条记录。我正在按range属性对记录进行排序，但当我在ajax调用的success函数中滚动并加载新的20条记录时，div的排序条件对这些div不起作用这些新记录以串行顺序显示，而不进行排序。我可以对当前页面中的记录进行排序，但如果你排序，然后滚动到底部并加载新记录，这些记录在滚动时不会被排序 <html> <head> <meta http

我有大约1000条记录要以div显示。我以20个为一捆的方式显示它们，当您滚动到底部时，将加载下20条记录。我正在按range属性对记录进行排序，但当我在ajax调用的success函数中滚动并加载新的20条记录时，div的排序条件对这些div不起作用

这些新记录以串行顺序显示，而不进行排序。我可以对当前页面中的记录进行排序，但如果你排序，然后滚动到底部并加载新记录，这些记录在滚动时不会被排序

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    <body>
    <div id="container">
    <div class="content" data-name="Peter" data-price="1000" data-location="US"><span class="productPriceForSorting">1000</span</div><br />
    <div class="content" data-name="Willy" data-price="1200" data-location="Mexico"><span class="productPriceForSorting">1200</span</div><br />

    <div class="content" data-name="Peter" data-price="2000" data-location="US"><span class="productPriceForSorting">2000</span</div><br />
    <div class="content" data-name="Willy" data-price="800" data-location="Mexico"><span class="productPriceForSorting">800</span</div><br />
    <div class="content" data-name="Willy" data-price="1300" data-location="Mexico"><span class="productPriceForSorting">1300</span</div><br />
    <div class="content" data-name="Peter" data-price="800" data-location="US"><span class="productPriceForSorting">800</span</div><br />
    </div>
</div>
<div id="prod"></div>
    <button id="asc">sort by price asd</button>


在此处插入标题
1000美元（b）。查找(
“.productPriceForSorting”）.text（）；
}
函数重新排序L1（el）{
var container=$（“#container”）；
container.html（“”）；
el.每个（函数（）{
$（此）.appendTo（容器）；
});
}
$（文档）。准备就绪（“#asc”）。单击（函数（）{
重新排序1（$（'.content'）.sort（sortByPrice））；
});

各位，请帮助我，单击排序后如何对滚动元素进行排序？

您的AJAX调用会生成如下记录：

var name = "<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
         + "Peter" +"</div>"+"<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
         + "Willy" +"</div>";

下面是固定排序的示例。Ajax是供您修复的。它必须包含

“+data1[i].price+”

或类似的内容

我有点错过了添加product div，它在我的代码中，但我错过了添加这里。我添加的product div正好在div容器结束的地方。但是新的product div元素并没有按照我想要的方式排序。请先生。这是一个请帮助我的请求。排序方法似乎还可以。在我看来，问题在于访问数据的方式。为什么要将新内容直接附加到

#prod

而不是

#container

作为行的起始集？我将它附加到产品div中，因为当我将它们附加到container中时，div结构被打乱了…任何解决方案如果我将新记录附加到container中，然后，每20条记录与每个内容div一起插入。即，每个内容div后面都有20条新记录。如何处理，先生？编辑后。你用什么代码来做你提到的事情？您确定没有将

.content

与

#container

放错位置吗？

<script type="text/javascript">
        function sortByPrice(a, b) {
            return $(a).find('.productPriceForSorting').text() > $(b).find(
                    '.productPriceForSorting').text();
        }

        function reorderEl1(el) {
            var container = $('#container');
            container.html('');
            el.each(function() {
                $(this).appendTo(container);
            });
        }

        $(document).ready('#asc').click(function() {
            reorderEl1($('.content').sort(sortByPrice));

        });

        </script>

var name = "<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
         + "Peter" +"</div>"+"<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
         + "Willy" +"</div>";

function sortByPrice(a, b) {
            return parseInt($(a).find('.productPriceForSorting').text()) > parseInt($(b).find('.productPriceForSorting').text());
        }