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

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

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

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

Answer 1

我建议使用css定位顶部div并按如下方式交换该类：

(function ($) {
        $(".wrap").on("click", function () {
            if ($(this).index() == 0) {
            } else {
                $(".wrap").removeClass("top");
                $(this).addClass("top");
            }
        });
    }(jQuery));

Answer 2

这会将您点击的内容与第一个元素交换。

$(".wrap").on("click", function () {
  var $this = $(this);
  if ($this.index() == 0) {
  } else {
    var first = $this.siblings('.wrap').first();
    first.insertBefore($this);
    $this.prependTo($this.parent());
  }
});

如果您只想将点击的元素移到顶部，则可以执行

$this.prependTo($this.parent());

Answer 3

要使用jQuery交换两个DOM元素，您可以使用以下内容： -

＆＃13;

 (function($) {
   $(".wrap").on("click", function(event) {
     var index = $(event.target).index();
     var first = $(".wrap").first();

     if (index > 0) {
       $(first).swapWith(this);
     }
   });
 }(jQuery));


 jQuery.fn.swapWith = function(to) {
   return this.each(function() {
     var copy_to = $(to).clone(true);
     var copy_from = $(this).clone(true);
     $(to).replaceWith(copy_from);
     $(this).replaceWith(copy_to);
   });
 };

＆＃13;

.wrap {
  height: 100px;
  width: 200px;
  margin: 10px 10px 10px 10px;
  background-color: #2d8cd0;
}
h2 {
  color: white;
  text-align: center;
  padding-top: 20px;
  pointer-events: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="wrap">
  <h2>1</h2>
</div>

<div class="wrap">
  <h2>2</h2>
</div>

<div class="wrap">
  <h2>3</h2>
</div>

<div class="wrap">
  <h2>4</h2>
</div>

＆＃13;

从顶级div交换div的位置

3 个答案: