仅使用jquery向上和向下移动包含值

Question

我有一个div

  <div>
  <div id='mydiv1'><textarea id='mytask1'>hai</textarea></div>
 <div id='mydiv2'><textarea id='mytask2'>hello</textarea></div>
  </div>

当我点击第二个textarea中的向上移动按钮时，我必须将此div更改为

 <div>
 <div id='mydiv1'><textarea id='mytask1'>hello</textarea></div>
 <div id='mydiv2'><textarea id='mytask2'>hai</textarea></div>
  </div>

Answer 1

试试这个：

Fiddle

上的演示

更新假设ids不知道Fiddle

HTML：

<div>
  <div id='mydiv1'><textarea id='mytask1'>hai</textarea></div>
  <div id='mydiv2'><textarea id='mytask2'>hello</textarea></div>
  <button>Swap</button>
</div>

jQuery的：

$('button').on('click', function() {
    var div1 = $('#mytask1').val();
    var div2 = $('#mytask2').val();
    $('#mytask1').val(div2);
    $('#mytask2').val(div1);
});

Answer 2

据我所知，您想要移动容器而不是仅移动文本。 试试DEMO

代码

$(function(){
    $('button').click(function(){
          $('#mydiv2').after($('#mydiv1'));  
    });
});

修改 如果您想在每次点击上交换容器，请将代码更改为

$(function(){
    $('button').click(function(){
        var first = $('#mydiv1').parent().find("div:first");
          first.next().after(first);  
    });
});

更新了 Fiddle

希望它有所帮助;