特定のインデックスでスワップdivの位置

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

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

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

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

Answer 2

あなたは、このためのinsertBeforeとinsertAfterを使用するようにしてください。たとえば ： -

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

.wrap { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.wrap1 { 
 
    background: red; 
 
} 
 

 
.wrap2 { 
 
    background: yellow; 
 
}

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