Javascript 掉期div'；从上分区开始的s位置'；s

我试图从上到下交换一个div的位置，当我单击另一个div时，可以交换top 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>

事实上，我不想删除

div

，而是单击它来交换位置

---

如何使用

jQuery

本身实现这一点？

我建议使用css定位顶部的

div

，并按如下方式交换类：

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

---

要使用jQuery交换这两个DOM元素，可以使用以下方法：-

（函数（$）{
$（“.wrap”）。在（“单击”时，函数（事件）{
var index=$（event.target）.index（）；
var first=$（“.wrap”）.first（）；
如果（索引>0）{
美元（第一次）。与（本次）交换；
}
});
}（jQuery））；
jQuery.fn.swapWith=函数（to）{
返回此值。每个（函数（）{
var copy_to=$（to）.clone（true）；
var copy_from=$（this）.clone（true）；
$（至）.replaceWith（复制自）；
$（此）.替换为（复制到）；
});
};
.wrap{
高度：100px；
宽度：200px；
保证金：10px 10px 10px 10px；
背景色：#2d8cd0；
}
氢{
颜色：白色；
文本对齐：居中；
填充顶部：20px；
指针事件：无；
}

1.
2.
3.
4.
这将与第一个元素交换您单击的任何内容

$(".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());

你真的需要交换代码标记，还是只需要在另一个上面覆盖一个元素？removeClass（'top'）可能实际上我有一个主大Div和3个小Div，大Div在上面，另外3个Div在右边，当我点击small div时，big div和big div的div交换显示small和small div显示big。@YogendraPal您能给我们提供一个代码笔、JSFIDLE或嵌入式SO片段中的代码示例吗？@Owen Ayres您可以做得更简单一些。首先，在（$（this））之前插入$（this.prependTo（$（this.parent（））；
$this.prependTo($this.parent());