对< div>进行排序使用jQuery的元素 [英] Sort <div> elements using jQuery
问题描述
我的网站上有如下所示的HTML:
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>
我正在寻找一种方法,可以根据下拉列表中的选择对这些组在jQuery中在浏览器中的显示顺序进行排序.当用户在任何下拉菜单或页面加载中选择新值时,都应采用这种方法.
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?
我可以使用jQuery UI,如果可以以任何方式使用可排序的东西.我找不到使用它的方法.
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.
更新:< div class ="group">中还有其他数据.无论下拉菜单如何移动,都应遵循该下拉菜单.组数从0到20.
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.
推荐答案
编辑:以下是一些应遵循的代码.此处的select_1
,select_2
等应为下拉列表的ID. getDropdown()
应该是使用您选择的方法(document.getElementById().options.selectedIndex,
,jquery等)返回给定下拉列表ID的选定值的函数
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]);
}
}
这篇关于对< div>进行排序使用jQuery的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!