0

我有一个非常特殊的情况，我需要将数据拆分为 html 中的两个不同列表。像这样：

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

因此，正如您从“ref”属性中看到的那样，我知道<li>第二个列表中的哪个元素是第一个列表中哪个元素的延续<li>。

现在我需要为这些列表启用 jQuery UI sortable() 但是当我重新排序第一个时，我也需要重新排序第二个。我尝试使用句柄，但它不起作用，因为看起来句柄元素需要位于被移动的元素内部，但这两个位于页面中的不同位置。

4

1 回答 1

0

我确实相信您应该共享一些代码（您尝试过的），并且我假设您熟悉您正在使用的 Sortable 插件。您应该在 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/

于 2012-04-06T13:16:31.983 回答