Question

13

Sort < div> elements using jQuery

rated 0 times [ 19] [ 6] / answers: 1 / hits: 19895 / 16 Years ago, mon, february 16, 2009, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ammonderekm

Add To Favorites

Follow

Total Points: 247

Total Questions: 105

Total Answers: 98

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

ammonderekm questions

1 First input autofocus for OTP input fields in React

Tue, May 24, 22, 00:00, 2 Years ago

1 React Hooks, how to share state between two functions

Wed, Mar 11, 20, 00:00, 4 Years ago

1 React Apexchart is not taking its parent height when setting height 100%

Fri, Jan 17, 20, 00:00, 4 Years ago

1 React Hooks to Implement Counter

Thu, Dec 19, 19, 00:00, 4 Years ago

1 React-Spring - Change Transition Animation Speed

Thu, Oct 24, 19, 00:00, 5 Years ago

View All

answered 56 Years ago johnathanhakeems · Accepted Answer

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

        }

    }