JavaScript - 如何对 div 进行排序

Question

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

<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，我如何（按价格）对上面的房屋列表进行排序。

举个例子，我基本上想做下面的演示（但不使用 TABLE）。

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

Answer 1

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

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

Answer 2

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

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