Сортировка <div>элементов с использованием jQuery

Question

У меня есть HTML как на моем сайте:

<div class="groups">
  <div class="group">
    Group 1 priority:
    <select>
      <option value="1.0">1</option>
      <option value="2.0" selected="selected">2</option>
      <option value="3.0">3</option>
    </select>
  </div>
  <div class="group">
    Group 2 priority:
    <select>
      <option value="1.0">1</option>
      <option value="2.0">2</option>
      <option value="3.0" selected="selected">3</option>
    </select>
  </div>
  <div class="group">
    Group 3 priority:
    <select>
      <option value="1.0" selected="selected">1</option>
      <option value="2.0">2</option>
      <option value="3.0">3</option>
    </select>
  </div>
</div>

Я ищу способ сортировки порядка, в котором эти группы отображаются в браузере, с помощью jQuery на основе того, что выбрано в раскрывающемся списке. Следует прибегать, когда пользователь выбирает новое значение в любом из раскрывающихся списков или при загрузке страницы.

Какой самый простой подход к этой проблеме?

У меня есть jQuery UI, если сортируемую вещь можно использовать любым способом. Я не мог найти способ использовать это.

Обновление : в

есть другие данные, которые должны следовать за выпадающими, куда бы они ни перемещались. Количество групп варьируется от 0 до 20.

Answer 1

Редактировать: Вот код, который должен делать то, что вы после. Здесь select_1, select_2 и т. Д. Должны быть идентификаторами выпадающих меню. getDropdown() должна быть функцией, которая возвращает выбранное значение данного выпадающего идентификатора, используя выбранный вами метод (document.getElementById().options.selectedIndex,, jquery и т. Д.)

<div id="parent">
    <div id="child1">
        ..content
        <select id="select_1">...content</select>
    </div>

    <div id="child2">
        ..content
        <select id="select_2">...content</select>
    </div>

    <div id="child3">
        ..content
        <select id="select_3">...content</select>
    </div>
</div>

---

 function sortValues()
    {
        /*Save the contents of each div in an array 
          so they can be looped through and 
          re inserted later*/
        var content=[$("#child1").html(),$("#child2").html,$("#child3").html()];

        //Get the value of all dropdowns and sort them
        var sortedArray=[getDropdown("select_3"),getDropdown("select_2"),getDropdown("select_3")];
        var sortedContent=new Array();
        sortedArray.sort();

        /*Loop through all the sorted values, 
         compare the value of each dropdown
         against the sorted value and use that 
         to determine the new arrangement of the divs
         */
        for (x=0; x< sortedArray.length; x++)
        {
            for (y=0; y<=content.length; y++)
            {
                if (getDropdown("dropdown_" + (y+1))==sortedArray[x])
                {
                    sortedContent[x]=content[x];
                               //This will prevent the same div from being assigned again:
                    $("#select_" + (y+1)).remove(); 
                    break;
                }

            }

        }
        /* Empty the parent div so new divs can be inserted.
           You can also do a fadeout/fadeIn of the div here
         */


        $("#parent").empty();       

        for (x=0; x< sortedContent.length; x++)
        {
            $("#parent").append(sortedContent[x]);
        }
    }