jQuery Ajax，在列表之間移動列表項

Question

我不確定是否返回html是這裏的方式，但我沒有經驗與JSON的所有，也許這就是我的問題的答案。

我有一個項目兩個UL名單，他們都有一個選擇在他們的第一個列表包含所有等於CERO所選選項的項目，其他的列表中有休息：

<ul id="invlistsinmesa"> 
    <li id="inv-56"> 
     <label>Name 1</label> 
     <select> 
      <option value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option value="3">Mesa 3</option> 
        <!-- ... -->        
      <option selected="selected" value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li><li id="inv-57"> 
     <label>Name 2</label> 
     <select> 
      <option value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option value="3">Mesa 3</option> 
        <!-- ... -->        
      <option selected="selected" value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li> 
</ul> 
<ul id="invlist"> 
    <li id="inv-36"> 
     <label>Name 1</label> 
     <select> 
      <option value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option selected="selected" value="3">Mesa 3</option> 
        <!-- ... -->        
      <option value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li><li id="inv-37"> 
     <label>Name 2</label> 
     <select> 
      <option selected="selected" value="1">Mesa 1</option> 
      <option value="2">Mesa 2</option> 
      <option value="3">Mesa 3</option> 
        <!-- ... -->        
      <option value="0">Sin mesa</option> 
     </select> 
     <div class="delete_box"><a href="#invlistsinmesa" class="close">Delete</a></div>     
</li> 
</ul> 

由於你看到有很多代碼，它都來自數據庫。我在這裏進行了一些Ajax調用（刪除，添加新項目），但我遇到問題的一個是當我更改選定的選項。這是我的代碼現在（在選擇的變化）：

編輯：添加了點擊功能（它不是因爲我使用jqTransform風格的選擇，但它與使用常規選擇更改相同）

$('li[id^="inv-"] div.jqTransformSelectWrapper ul li a').on('click', function(){ 
    var item=($(this).closest("li[id^='inv-']")).attr('id'); 
    var id = parseInt(item.replace("inv-", "")); 
    var nummesa= ($(this).closest('li')).attr('class'); 

$.ajax({ 
    type: "POST", 
    url: "ajax-invi.php", 
    dataType: "html", 
    data: "id="+id, 
    success: function(data) { 
    if(data>=0){ 
     if(data!=0){ 
     noty({"text":"Person has been moved"}); 
     }else{ 
     //Here I need to control if the list item needs to 
     //change to the other list or not 
     }   
    }else{ 
     if(data=='-1'){ 
     noty({"text":"Table is full, person cannot move there","type":"error"}); 
     } 
    } 
    } 
}); 
}); 

在我的Ajax的invi.php文件我去查詢數據庫，看看是否人能移動到新選定的選項（基本上你把表的人，你不能把一個人在一個完整的表需要控制），如果表格滿了，則返回-1;如果不是，則返回0，但如果需要移動它，那麼我有一個問題，因爲我沒有返回需要移動的html。

Answer 1

我對你在這裏想要的做了一些假設，但假設你想將LI從invlistsinmesa移動到invlist，這裏是你想要移動數據的代碼。您不需要從您的調用中返回任何HTML，因爲HTML已經存在於您的文檔中。假設您的.ajax調用中的id是LI id，例如inv-56，那麼這裏是代碼：

var $item = $('#' + id); 
$('#invlist').append('<li id=' + id + '>' + $item.html() + '</li>'); 
$item.remove();