如何使用JQuery / Prototype / Javascript基于内部元素内容对html div元素进行排序？

Question

用户可以添加区域或郊区。无论如何，所有郊区都将被封闭在自己的地区。如果用户添加区域，则最初郊区将按排序顺序排列，因为值来自Web服务的排序。之后，用户可以在任何时间点添加/删除郊区。要求是，区内所有郊区必须始终按照名称按升序排序。

以下是html格式：

<div style="" class="suburbsToSearch" id="suburbsToSearch">
    <div id="2457" class="localityContainer">
        <div class="locality">
            <legend class="expand" style="padding-top: 0px">
                District 1</strong>
            </legend>
        </div>
        <div class="localitySelector">
            <img width="14 px" height="14 px" src="/ah/image/remove.gif"
                alt="remove" title="remove">
        </div>
        <div class="clearLocalityDiv"></div>
    </div>
    <div class="2457 localityContainer collapsedSuburb"
        style="display: none;">
        <div class="localitySelector">
            <input type="checkbox" id="14927" value="Suburb 1"
                checked="true">
        </div>
        <div class="locality">
            <label class="searchSuburb">Suburb 1</label>
        </div>
        <div class="localitySelector">
            <img width="14 px" height="14 px" 
                name="Barton, ACT (2600)" src="/image/remove.gif" alt="remove"
                title="remove">
        </div>
        <div class="clearLocalityDiv"></div>
    </div>
    <div class="2457 localityContainer collapsedSuburb"
        style="display: none;">
        <div class="localitySelector">
            <input type="checkbox" id="19485" value="Suburb 2"
                checked="true">
        </div>
        <div class="locality">
            <label class="searchSuburb">Suburb 2</label>
        </div>
        <div class="localitySelector">
            <img width="14 px" height="14 px" name="Beard, ACT (2620)"
                src="/image/remove.gif" alt="remove" title="remove">
        </div>
        <div class="clearLocalityDiv"></div>
    </div>
    <div class="2457 localityContainer collapsedSuburb"
        style="display: none;">
        <div class="localitySelector">
            <input type="checkbox" id="14788" value="Suburb 3"
                checked="true">
        </div>
        <div class="locality">
            <label class="searchSuburb">Suburb 3</label>
        </div>
        <div class="localitySelector">
            <img width="14 px" height="14 px" 
                name="Deakin, ACT (2600)" src="/image/remove.gif" alt="remove"
                title="remove">
        </div>
        <div class="clearLocalityDiv"></div>
    </div>
<div id="2458" class="localityContainer">
      <div class="locality">
         <legend class="expand" style="padding-top: 0px">
            District 2</strong>
         </legend>
      </div>
      <div class="localitySelector">
         <img width="14 px" height="14 px" src="/ah/image/remove.gif"
            alt="remove" title="remove">
      </div>
      <div class="clearLocalityDiv"></div>
   </div>
   <div class="2458 localityContainer collapsedSuburb"
      style="display: none;">
      <div class="localitySelector">
         <input type="checkbox" id="101" value="Suburb 1"
            checked="true">
      </div>
      <div class="locality">
         <label class="searchSuburb">Suburb 1</label>
      </div>
      <div class="localitySelector">
         <img width="14 px" height="14 px" 
            name="Suburb 1" src="/image/remove.gif" alt="remove"
            title="remove">
      </div>
      <div class="clearLocalityDiv"></div>
   </div>
   <div class="2458 localityContainer collapsedSuburb"
      style="display: none;">
      <div class="localitySelector">
         <input type="checkbox" id="102" value="Suburb 2"
            checked="true">
      </div>
      <div class="locality">
         <label class="searchSuburb">Suburb 2</label>
      </div>
      <div class="localitySelector">
         <img width="14 px" height="14 px" name="Suburb 2"
            src="/image/remove.gif" alt="remove" title="remove">
      </div>
      <div class="clearLocalityDiv"></div>
   </div>
</div>