两个div之间互换位置

<div id="divs">
    <div class="b-1">111111</div>
    <div class="b-2">222222</div>
    <div class="b-3">333333</div>
</div>

 

<script>
// 方法一
  $(document).ready(function(){
    var arr = $('#divs').find('div').toArray();// 把三个div放进数组里面
    var temp;
    // 1 3对调
    temp = arr[0];
    arr[0] = arr[2];
    arr[2] = temp;
    $('#divs').html(arr)
   });

// 方法二
 window.onload = function() {
    changeDiv(0,2)
}

function changeDiv(firstIndex,secondIndex){
    var $divs = $('#divs').find('div');
    var firstDiv = $divs.eq(firstIndex);
    var secondDiv = $divs.eq(secondIndex);
 
    var temp;
    temp = firstDiv.html();
    firstDiv.html(secondDiv.html());
    secondDiv.html(temp);
}
// 方法三
  $(document).ready(function(){
    var $div1 = $(".b-1");
    var $div3 = $(".b-3");
    var $temobj1 = $("<div></div>");
    var $temobj2 = $("<div></div>");
    $temobj1.insertBefore($div1);
    $temobj2.insertBefore($div3);
    $div1.insertAfter($temobj2);
    $div3.insertAfter($temobj1);
    $temobj1.remove();
    $temobj2.remove();
   });
</script>

 

 

 

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值