位置由id js？

Question

如何制作，通过在“div”中按“a”开启窗口应该在“div”之间。

按下“id 2”，窗口显示在“id 1”和“id 3”之间。按下“id 3”，窗口显示在“id 2”和“id 4”之间。

$('#add').hide(); 
 
    
 
$('#open_add').click(function() { 
 
     $('#add').show(); 
 
     $('#3').hide(); 
 
    }); 
 
     
 
$('#close_add').click(function() { 
 
     $('#add').hide();  
 
     $('#3').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="add"> 
 
<a href="#" id="close_add">Close add</a> 
 
</div> 
 

 
<div id="1"> 
 
    <p>First</p> 
 
</div> 
 

 
<div id="2"> 
 
    <p>Second</p> 
 
</div> 
 

 
<div id="3"> 
 
    <a href="#" id="open_add">Open add</a> 
 
</div> 
 

 
<div id="4"> 
 
    <p>Fourth</p> 
 
</div> 
 

 
<div id="5"> 
 
    <p>Fifth</p> 
 
</div>

Answer 1

尝试插入DIV喜欢的是这个例子：

$(document).ready(function(){ 
 
$('div p').click(function() { 
 
$('#add').remove().insertAfter($(this).parent()).show(); 
 
}) 
 
}) 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="add" style="display:none;"> 
 
<a href="#" id="close_add">Close add</a> 
 
</div> 
 
<div id="open_add" style="display:none;"> 
 
<a href="#" id="open_add">Open add</a> 
 
</div> 
 

 
<div id="1"> 
 
    <p>First</p> 
 
</div> 
 

 
<div id="2"> 
 
    <p>Second</p> 
 
</div> 
 

 
<div id="3"> 
 
    <p>Third</p> 
 
</div> 
 

 
<div id="4"> 
 
    <p>Fourth</p> 
 
</div> 
 

 
<div id="5"> 
 
    <p>Fifth</p> 
 
</div>