根据第二个列表的顺序对一个列表排序

我是Jquery的新手，正在努力解决如何解决我的问题。根据第二个列表的顺序对一个列表排序

我有两个无序列表，列表A和列表B.列表A可以使用.sortable（{axis：'y'}）方法排序。当列表A重新排序时，我想自动重新列表列表B（这不是用户可排序的），以反映列表A中的更改。

我很努力地知道从哪里开始，如果任何人都可以提供帮助，不胜感激。

感谢

更新：这是从我的网页一些额外的代码来把事情的来龙去脉。

<div class="cvOverview"> 
       <h4>CV Overview</h4> 
       <ul class="sortable" id="listA"> 
        <li id="item_1" class="editContent"><span></span>About me</li> 
        <li id="item_2" class="editContent"><span></span>Personal profile</li> 
        <li id="item_3" class="editContent"><span></span>Employment history</li> 
        <li id="item_4" class="editContent"><span></span>Skills &amp; Qualities</li> 
       </ul> 
       <p class="backButton editButton"><a href="cv.html" title="#"><span>Completed</span></a></p> 
      </div> 
<div class="cvMainContent"> 
       <h3>Dean Bates</h3> 

       <ul class="sortable" id="listB"> 
        <li id="item1"> 
         <div class="cvContactDetails"> 
          Some text here 
         </div> 
        </li> 
        <li id="item2"> 
         <div class="cvPersonalProfile"> 
          Some text here 
         </div> 
        </li> 
        <li id="item3"> 
         <div class="cvEmploymentHistory"> 
          Some text here 
         </div> 
        </li> 
        <li id="item4"> 
         <div class="cvSkillsFromJobs"> 
          Some text here 
         </div> 
        </li> 
       </ul> 

      </div>

两个列表都将包含相同的项目，相同数量的项目，最终我想添加其中，如果列表项被删除或插入清单A的功能，在相应的项目被删除或添加到列表B中。

从设计角度来看，列表A代表列表B中用户对列表B的内容的概述，因此他们可以重新排列和更改简化列表的内容，这些变化反映在另一个更详细的清单中。

希望这会有所帮助。

再次感谢您的帮助。

来源

2011-02-23 deanobates

您可以将列表压缩在一起，对列表A的键上的组合列表进行排序，然后解压缩。 – Pointy 2011-02-23 18:17:42

列表B只包含列表A中的元素？ – 2011-02-23 18:23:45

每个列表中的内容的示例将有所帮助... – 2011-02-23 18:25:01

使用更新事件排序其他列表

$(".selector").sortable({ 
    update: function(event, ui) { ... } 
});

然后，你需要环通”第一个列表，并在你的第二个列表中移动的项目，如果你提供的HTML/JS我们也许能够帮助你。

尝试jsfiddle.com

来源

2011-02-23 18:43:07 macarthy

嗨，感谢您的帮助，这里有一些额外的代码，把我想要做的上下文。 – deanobates 2011-02-24 10:02:07

不知道如果你只是数据存储为HTML或多么复杂的模型，但这里的想法：

使用排序更新功能：

var userSortbaleList = $('#usersortableList'); 
var nonUserSortableList = $('#nonUserSortableList'); 

userSortbaleList.sortable({ 
     axis: 'y', 
     update: function(event, ui) { 
      $.each(userSortableList.children(), function(index, html){ 
       /** Need to see html or JS to do sorting */  
      } 
     }  
});

来源

2011-02-23 18:44:36 MattoTodd

这里是与您的精确标记工作的完整的解决方案：

$('#listA').sortable({update: sortListB}); 

function sortListB(){ 

    $('#listA li').each(function(){ 

     $('#listB [id=' + $(this).attr('id').replace('_', '') + ']') 
      .remove() 
      .appendTo($('#listB')); 

    }); 
}

见此处： http://jsfiddle.net/LnvEM/1/

它是如何工作的？一个接一个地，你从上到下遍历列表A中的每个项目，从列表B中删除相应的项目B .remove()，并将其重新附加到列表B的后面.appendTo($('#listB'))。一旦你为B中的每一件物品做了这件事，那么你开始的那件物品就会在上面，等等。

（注意：为列表B中的物品添加额外文字以便在视觉上区分它们并指示它跟踪哪个物品在列表A中不是必需的。）

来源

2012-08-09 22:27:20 Faust

根据第二个列表的顺序对一个列表排序

回答

相关问题