两个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>

发布了36 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_37935725/article/details/82892790
今日推荐