根據第二個列表的順序對一個列表排序

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

根據第二個列表的順序對一個列表排序

回答

相關問題