JavaScript - Как отсортировать div - PullRequest
Новая
       11

JavaScript - Как отсортировать div

2 голосов
/ 21 мая 2009

У меня есть список домашней информации в формате ниже. 

<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 / работа / Песочница / dojo0.9 / samiam / sortableList.html

Ответы [ 2 ]

6 голосов
/ 21 мая 2009

Я предполагаю, что вы хотите прибегнуть к данным по запросу пользователя после того, как они были изначально отображены. Я обычно делаю это на стороне сервера через AJAX, то есть делаю GET-запрос для одного и того же набора данных с разной сортировкой. Это необходимо при подкачке данных, поскольку после сортировки отображаемые записи могут полностью отличаться от ранее отображаемых.

Если у вас есть небольшой набор данных, который не разбит на страницы, и вы хотите отсортировать данные на стороне клиента, я бы отобразил данные в виде массива javascript и заполнил бы ваши DIV через javascript. Затем, когда пользователь хочет выполнить сортировку, вы прибегаете к массиву и снова вызываете функцию рендеринга javascript, чтобы получить данные в недавно отсортированном порядке.

1 голос
/ 21 мая 2009

Я согласен с OrbMan. Храните списки в массиве. Затем вы можете просто отсортировать массив, вместо того, чтобы делать все это в DOM с причудливым Javascript.

На несвязанной ноте, вы должны использовать div для всего? Если бы вы использовали (не) упорядоченный список, это было бы лучше семантически и потенциально облегчило бы чтение и поддержку любого написанного вами Javascript. Вместо того, чтобы ссылаться на кучу специфически классифицированных div, вы можете ссылаться на li внутри (классифицированного) ul / ol.

...