2

我有以下格式的家庭信息列表。

<div id="content">
    <div class="listing">
        <div class="photo"><a href="#"><img src="img.jpg" width="200"></a></div>
        <div class="info">
            <p class="address"><a href="#">321 Main St<br>Beverly Hills, CA 90210</a></p>
            <div class="attr">Price</div>
            <div class="val price">$325,000</div>
            <div class="attr">Sq. Ft.</div>
            <div class="val">2,600</div>
            <div class="attr">Built</div>
            <div class="val">1988</div>
            <div class="attr">Bedrooms</div>
            <div class="val">3</div>
            <div class="attr">Bathrooms</div>
            <div class="val">2.5</div>
        </div>
    </div>
    <div class="listing">{ANOTHER HOME LISTING...}</div>
    <div class="listing">{ANOTHER HOME LISTING...}</div>
    <div class="listing">{ANOTHER HOME LISTING...}</div>
</div>      

使用 JavaScript,我如何(按价格)对上面的房屋列表进行排序。

举个例子,我基本上想做下面的演示(但不使用表)。

http://sam-i-am.com/work/sandbox/dojo0.9/samiam/sortableList.html

4

2 回答 2

6

我假设您想在最初呈现数据后根据用户的请求对数据进行处理。我通常通过 AJAX 在服务器端执行此操作,即对具有不同排序的同一数据集执行 GET 请求。这在分页数据时是必要的,因为在排序后显示的记录可能与以前显示的记录完全不同。

如果您有一个未分页的小数据集并且您想在客户端进行排序,我会将数据呈现为 javascript 数组并通过 javascript 填充您的 DIV。然后,当用户想要排序时,您可以使用该数组并再次调用您的 javascript 渲染函数以按照新排序的顺序获取您的数据。

于 2009-05-21T19:10:19.383 回答
1

我同意 OrbMan。将列表存储在数组中。然后,您可以简单地对数组进行排序,而不是使用花哨的 Javascript 在 DOM 中完成所有操作。

在不相关的说明中,您必须对所有内容都使用 div 吗?如果您使用(无)有序列表,它在语义上会更好,并且可能使您编写的任何 Javascript 更易于阅读和维护。您可以在(分类的)ul/ol 中引用 li,而不是引用一堆专门分类的 div。

于 2009-05-21T19:13:59.827 回答