製作的onClick功能，將切換textarea的地方

Question

我有以下代碼：

 var counter=0; 
    function appendText(){  
    var text = $("#text").val(); 
if ($("#text").val()){  

var textArea = "<div> <textarea id='t"+counter+"'>"+text+ 
    "</textarea><button id='b"+counter+"' name='t"+counter+"' >edit</button> <button onClick='moveUp();'>Up</button></div>"; 


    $("#addedText").after(textArea);  
    $("#t"+counter).attr('readonly','readonly');  
    $("#t"+counter).attr('readonly','readonly'); 

    $("#t"+counter).css('width','500px'); 
$("#t"+counter).css('resize','none'); 
$("#t"+counter).css('background-color','#5CCCCC'); 
$("#t"+counter).css('font-weight','bold');    

$("#b"+counter).bind('click',makeAreaEditable);     
counter++; } else{ }   };                 


var makeAreaEditable = function() { 
var target = event.target||event.srcElement||event.originalTarget;  
var targetArea =$("#"+target.name);  
targetArea.removeAttr('readonly');  
var button = $("#"+target.id);  
button.text("OK");  
button.unbind('click'); 
button.bind('click',saveEdit); }; 

    var saveEdit = function() { 
    var target = event.target || event.srcElement || event.originalTarget;  
    var button = $("#"+target.id); 
    button.text("edit"); 
    button.unbind('click'); 
    button.bind('click',makeAreaEditable);  
    var targetArea = $("#"+target.name); 
    targetArea.attr('readonly', 'readonly'); }; 

我想不出我怎樣才能使爲moveUp（）函數，以便它會將textarea移動一個空格。之前的textarea應該用您按下「上」按鈕的位置切換位置。

的HTML如下：

<textarea id="text" placeholder="baga text aici"></textarea> <button 
id="addText" onClick="appendText()" >Add text </button>  <div 
id="addedText" style="float:left"></div> 

Answer 1

$(".moveup").on("click",function() { 
     var $divcontainer = $(this).parent();    
     if ($divcontainer.prev().get(0)) $divcontainer.prev().before($divcontainer); 

     }); 
//append whatever how many textarea & its up button in div.allthetextarea 

HTML

<div class="allthetextarea"> 
     <div><textarea/><input class="moveup"/></div> 
     <div><textarea/><input class="moveup"/></div> 
    ... 
</div> 

CSS

 .allthetextarea .moveup:first-child {display:none;}