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中完成所有操作。

在一个不相关的说明中，你必须使用divs吗？如果您使用了（非）有序列表，那么它在语义上会更好，并且可能使您编写的任何Javascript更易于阅读和维护。您可以在（分类）ul / ol中引用li，而不是引用一堆特定类别的div。

JavaScript - 如何对div进行排序

2 个答案: