Question

我正在尝试从顶部开始交换div的位置，当我点击另一个div时，顶部div可以交换。

我的HTML

<div class="wrap top">
    <input type="text" value="div1" class="textbox " />
</div>

<div class="wrap">
    <input type="text" value="div2" class="textbox " />
</div>
<div class="wrap">
    <input type="text" value="div3" class="textbox " />
</div>

的jQuery

var objectDivs = $('.wrap');
objectDivs.on('click', function() {
    var $this = $(this);
    objectDivs.eq(0).html($this);
    $this.remove();
})

事实是我不想删除我点击的div，而是想要交换周围的位置。

我如何使用jQuery本身做到这一点？

Answer 1

＆＃13;

$(".wrap").on("click", function(){
  $(this).parent().prepend(this);
});

＆＃13;

.wrap{background:#eee;padding:10px; margin:10px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="wrap">1</div>
  <div class="wrap">2</div>
  <div class="wrap">3</div>
</div>

＆＃13;

Answer 2

您应该尝试使用insertBefore和insertAfter。例如： -

＆＃13;

(function($) {
  $(".wrap").on("click", function() {
    if ($(this).index() == 0) {
      $(this).insertAfter($(this).next());
    } else {
      $(this).insertBefore($(this).prev());
    }
  });
}(jQuery));

＆＃13;

.wrap {
  width: 50px;
  height: 50px;
}

.wrap1 {
  background: red;
}

.wrap2 {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrap wrap1"></div>
  <div class="wrap wrap2"></div>
</div>

＆＃13;

交换div在某个索引

2 个答案: