并行排序两个不同的列表使用jQuery排序

问题描述：

我有非常具体的情况下，我需要将数据拆分成两个不同的列表在HTML中。就像这样：并行排序两个不同的列表使用jQuery排序

<ul id="first_list"> 
    <li ref="1">The quick brown</li> 
    <li ref="2">My father works</li> 
</ul>

而第二个名单是这样的：

<ul id="second_list"> 
    <li ref="1">jumps over the lazy dog</li> 
    <li ref="2">at the Ministry of Defense</li> 
</ul>

因此，大家可以看到我从“裁判”的属性我知道，从第二列表<li>元素是一个延续，它的来自第一列表的<li>元素。

现在我需要让jQuery UI的排序（），以这些名单，但是当我重新排序第一，我需要第二重新排序了。我尝试使用句柄，但它不起作用，因为它看起来像句柄元素需要在被移动的元素内，但这两个在页面中的不同位置。

你说的是jQuery UI的排序 – Starx 2012-04-06 13:02:29

小伙子，这不是“我愿意支付，如果有人想出了一个解决方案对于这种“建立。告诉我们你已经尝试了什么，我们很乐意提供帮助。 – 2012-04-06 13:03:20

@AymanSafadi +1只为“年轻人”而设：D' – 2012-04-06 13:04:03

答

我相信你应该已经分享了一些代码（你试过什么），而我假设你熟悉你正在使用可排序的插件。您应该在Sortable的成功事件上运行以下代码，因此只要对任何LI进行排序，其他列表也将排序。不管怎么说，

试试这个：

//This line stored the LIs in a temp variable and remove it 
var $cachedList = $('<div />').html($('#second_list').html()); 
$('#second_list > li').remove(); 

//This line loads up the first UL's LIs and replaces the content for each LI 
//using $cachedList. 
$('#second_list').html($('#first_list').html()).find('li').each(function() { 
    $(this).html($cachedList.find('li[ref="'+$(this).attr('ref')+'"]').html()); 
});

演示：http://jsfiddle.net/AR8px/

并行排序两个不同的列表使用jQuery排序

相关推荐