Sort <div> elements using jQuery

Question

I have HTML like the following on my website:

<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>

I am looking for a way to sort the order these groups appear in the browser using jQuery, based on the what is selected in the dropdown. It should resort when the user selects a new value in any of the dropdowns, or on page load.

What would be the easiest approach to this problem?

I have jQuery UI available, if the sortable thing can be used in any way. I couldn't not find a way to use that.

Update: There is other data in the <div class="group"> that should follow the dropdowns wherever they are moved. The number of groups varies from 0 to 20.

Ali · Accepted Answer · 2009-02-16 13:07:31Z

4

Edit: Here is some code which should do what you're after. Here select_1, select_2, etc should be the IDs of the dropdowns. getDropdown() should be a function that returns the selected value of the given dropdown ID using your choice of method (document.getElementById().options.selectedIndex,, jquery, etc)

<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]);
        }
    }

edited Feb 16, 2009 at 13:07

answered Feb 16, 2009 at 10:52

Ali

268k270 gold badges593 silver badges788 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vegard Larsen Over a year ago

There is other data in the divs, and that data has to accompany the values set in the dropdowns.

Ali Over a year ago

the same array.sort approach would work, load the content of each div in an array, empty the parent div, use array.sort to sort the divs in alphabetical order and re-append them in the parent div using new order. Jquery will make all this easy. btw, what sort of content is it

Vegard Larsen Over a year ago

The divs also contain images, input fields and other stuff.

Vegard Larsen Over a year ago

You seem to have neglected the fact that there is an unknown number of groups. Other than that, it seems that the approach could work.

Ali Over a year ago

You'll need to echo out the number of groups somewhere in a variable like num_groups. Then when setting up the sortedArray array you can loop from 1-num_groups and for content, 0-(num_groups). Should work fine after that

Collectives™ on Stack Overflow

Sort <div> elements using jQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related