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呈现函数以按新排序的顺序获取数据.