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, как мне сортировать (по цене) список домов выше.

Чтобы привести пример, я, по сути, хочу сделать следующее демо (но не использовать ТАБЛИЦУ).

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

Answer 1

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

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

Answer 2

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

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