使用jQuery对元素进行排序

我的网站上有以下HTML代码：

 
 Group 1 priority:  1 2 3  
 
 Group 2 priority:  1 2 3  
 
 Group 3 priority:  1 2 3  
  

我正在寻找一种方法来根据下拉列表中选择的内容，使用jQuery对这些组在浏览器中出现的顺序进行排序。 当用户在任何下拉列表或页面加载中选择新值时，它应该求助。

这个问题最简单的方法是什么？

我可以使用jQuery UI，如果可以以任何方式使用可排序的东西。 我无法找到使用它的方法。

更新 ：

中还有其他数据，无论它们在何处移动，都应遵循下拉列表。 组的数量从0到20不等。

Answer 1

编辑：这里有一些代码应该做你想要的。 这里select_1 ， select_2等应该是下拉列表的ID。 getDropdown()应该是一个函数，它使用您选择的方法（ document.getElementById().options.selectedIndex, ，，jquery等）返回给定下拉ID的选定值document.getElementById().options.selectedIndex,

 
 
 ..content ...content 
 
 ..content ...content 
 
 ..content ...content 
  

---

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