如何強制jQuery調整大小以使用百分比？

Question

我正在嘗試使用jQuery可調整大小來調整我的div大小，除了在stop事件之後，jQuery UI會將我的%值還原爲pixel值之後，我的工作狀態還不錯。

我有一個工作小提琴這裏：http://jsfiddle.net/totszwai/j60h38fy/5/

當你拖動current容器的第一次，它會正確地計算所有的價值，但stop事件發生後，jQuery的用戶界面將更新％和變化它回到像素...所以下一次再拖動它時，％會丟失。

你如何強制jQuery將寬度值設置爲％？我可以在技術上使用setTimeout之類的東西，但這太難看了。

我不想要一個解決方案來處理像素中的div，因爲我可以在技術上在我的設置中添加n-divs，並且帶有％的代碼應該可以與n-div一起工作。

如果你看看我的neighbor div，％保留在那裏，只有current被覆蓋。我也嘗試過直接使用ui.element以及將ui.size.width設置爲我的％，但沒有任何一項工作。

更新：一種解決方法是將數據存儲每次在stop事件，從來沒有在start檢查一遍，但是，這仍然沒有解決的問題，即stop返回不正確的像素值。查看更新的jsFiddle：http://jsfiddle.net/totszwai/j60h38fy/6/

如果只有jQuery resizable需要我的％值，則所有內容都按預期工作。

已解決：好的，我接受了apaul34208的回答，因爲我曾問過如何使用％。但是，爲了實際解決我最初想要解決的問題，我最終使用了像素。請參閱我發佈below的答案，如果該答案對您有幫助，請改爲取而代之。

Answer 1

我遇到了同樣的問題，所選解決方案對我無效，因爲我需要將其推廣到任意數量的列。 此外codenamezero的答案沒有處理這樣一個事實，即原始問題需要使用寬度的百分比。

對於我的情況使用百分比的寬度是很重要的，因爲我正在實現一個表編輯器，並且保存的表必須根據呈現的位置動態更改大小。

所以我想出了這個解決方案，它以codenamezero的解決方案，但在改變後的寬度停止的工作原理類似於被設定爲百分比：
http://jsfiddle.net/genpsire/4mywcm1x/14/

$(document).ready(function() { 

    var container = $(".wrapper"); 
    var numberOfCol = 3; 
    $(".test").css('width', 100/numberOfCol +'%'); 

    var sibTotalWidth; 
    $(".test").resizable({ 
     handles: 'e', 
     start: function(event, ui){ 
      sibTotalWidth = ui.originalSize.width + ui.originalElement.next().outerWidth(); 
     }, 
     stop: function(event, ui){  
      var cellPercentWidth=100 * ui.originalElement.outerWidth()/ container.innerWidth(); 
      ui.originalElement.css('width', cellPercentWidth + '%'); 
      var nextCell = ui.originalElement.next(); 
      var nextPercentWidth=100 * nextCell.outerWidth()/container.innerWidth(); 
      nextCell.css('width', nextPercentWidth + '%'); 
     }, 
     resize: function(event, ui){ 
      ui.originalElement.next().width(sibTotalWidth - ui.size.width); 
     } 
    }); 
}); 

請選擇該解決方案，以便其他人不花他們的早晨拉着頭髮試圖將apaul34208的解決方案概括爲n列的情況。 （像我這樣做）