0

this is my sample code

<div id="id-1"><div>sampledata</div><span>sampledata</span></div> 
<div id"id-2"><div>sampledata</div><div> smpledata</div></div>
<div id"id-3"><div>sampledata</div><div> smpledata</div></div>
<div id"id-3"><div>sampledata</div><div> smpledata</div></div>

i'm having the id of only one div(for example id-3) . i want to swap that <div> with next <div>, since there is more than one <div> inside a <div> i cant use a next() .

thanks in advance

Haim Evgi
  • 123,187
  • 45
  • 217
  • 223
kiran
  • 1
  • Can you please explain what you want the result to look like? its hard to keep track of all the divs, what div do you want to swap with what div? – The Scrum Meister Feb 06 '11 at 06:36
  • Can you clarify what you're asking? What is it that you want to accomplish? There is more than one div in each of id-2, id-3 and you're repeating id-3 twice, so I assume the last one is supposed to be id-4, which would also have more than one div inside of it. – Vadim Feb 06 '11 at 06:36
  • im having a set of divs i want to swap the div with another div. im having only one divs id. i want to swap that div with next div. – kiran Feb 06 '11 at 06:38
  • It seems he wants to swap the order with its next sibling. – wuputah Feb 06 '11 at 06:39
  • Moving seems to be really popular these days... http://stackoverflow.com/questions/4906926/replacing-div-tag http://stackoverflow.com/questions/4906515/exchanging-values-in-div-tag http://stackoverflow.com/questions/4612955/jquery-how-to-move-a-li-to-another-position-in-the-ul-exchange-2-lis http://stackoverflow.com/questions/2943140/how-to-swap-html-elements-in-javascript – yankee Feb 06 '11 at 06:39
  • sorry , u r right @yads thats id-4 – kiran Feb 06 '11 at 06:44
  • i tried with $('#id-3').insertAfter(#('#id3).next()).. theres
    inside my main
    , this is not working
     – kiran Feb 06 '11 at 06:48

2 Answers2

0

Well, select div, then find next and insertAfter next

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<style>
.innderdiv4{
    backgrournd: green;
}

.innderdiv3{
    background: blue;
}
</style>
<script>
$(function (){
    var div = $('#id3');
    var next = $(div).next();
    if(confirm("Are you sure you want to do it"))
    {
        $(div).insertAfter(next);
    }
})
</script>

<div id="container">
<div id="id3">
    <div class="innderdiv3">div 3</div>
    <div class="innderdiv3">div 3</div>
</div>
<div id="id4">
    <div class="innderdiv4">div 4</div>
    <div class="innderdiv4">div 4</div>
</div>
</div>
S L
  • 14,262
  • 17
  • 77
  • 116
  • will next() work in my case im having
    tags inside the main
    – kiran Feb 06 '11 at 07:02
  • i tried with $('#id-3').insertAfter(#('#id3).next()).. theres
    inside my main
    , this is not working
     – kiran Feb 06 '11 at 07:02
  • @kiran just copy my code try it and you can modify it easily and if it did not work then let me know – S L Feb 06 '11 at 07:06
  • @kiran this is working code `$('#id-3').insertAfter($('#id-3').next())` is the code (you got wrong code there) and besides you have error in your html – S L Feb 06 '11 at 07:13
  • @experimentX ; it is not working, if there is no other
    – kiran Feb 06 '11 at 07:20
0

.next(); does select the very next sibling, not the child div elements. However, to ensure that you select the next sibling that is actually a div, you should use .next("div");. 

$("#id-3").before($("#id-3").next("div"));

The code above works with the example you gave as long as you change your last div's id to "id-4".

Or, you can copy and paste this code for a working example:

<html>
    <head>
        <title>Div Swap Test Page</title>
        <style type="text/css">
            #id-1,#id-2,#id-3,#id-4 {height: 50px; margin:10px 0; border:solid 1px #000}
            #id-3 {border:solid 1px #D00}
            #id-4 {border:solid 1px #0D0}
        </style>
    </head>

    <body>
        <div id="id-1"><div>This is div #1</div><span>I am first.</span></div>
        <div id="id-2"><div>This is div #2</div><span>I am second.</span></div>
        <div id="id-3"><div>This is div #3</div><span>I am third.</span></div>
        <div id="id-4"><div>This is div #4</div><span>I am last.</span></div>
        <p><button id="btn"><span>Swap</span></button></p>
    </body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        $("#btn").click(function() {
            $("#id-3").before($("#id-3").next("div"));
        });
    });
    </script>
</html>
Nimrod
  • 1,316
  • 9
  • 14