CODEWITHSUNDEEP
javascriptjquerycsshtml
iJade
iJade

Reputation: 23811

Rearrange divs inside a main div using jQuery

I'm trying to rearrange the div index inside of a main Div.But it is not working as expected.

Here is my html code

    <div id="divAll">
    <div id="divVideo">
        Video
    </div>

    <div id="divAudio">
        Audio
    </div>

    <div id="divImage">
        Image
    </div>
</div>

<input id="btn" type="button" />

And here is the jQuery code

    function Rearrange(videoP,audioP,imageP){
    if(videoP=="1"){
        $('#divAll').prependTo('#divVideo');
    }
    else if(audioP=="1"){
        $('#divAll').prependTo('#divAudio');
    }
    else if(imageP=="1"){
        $('#divAll').prependTo('#divImage');
    }

    if(videoP=="2"){
        $('#divAll div:eq(1)').after('#divVideo');
    }
    else if(audioP=="2"){
        $('#divAll div:eq(1)').after('#divAudio');
    }
    else if(imageP=="2"){
        $('#divAll div:eq(1)').after('#divImage');
    }

    if(videoP=="3"){
        $('#divAll div:eq(2)').after('#divVideo');
    }
    else if(audioP=="3"){
        $('#divAll div:eq(2)').after('#divAudio');
    }
    else if(imageP=="3"){
        $('#divAll div:eq(2)').after('#divImage');
    }
}
$('#btn').click(function(){
Rearrange(3,2,1);
});

On click of the button i'm trying to change the position of the divs as per parameters to function, but its resulting in no div in the main div.

Here is the jsfiddle

Upvotes: 0

Views: 3996

Answers (3)

A.D.
A.D.

Reputation: 2372

maybe this works for you.

function Rearrange(videoP,audioP,imageP){
 $divtemp =$('#divAll').clone().html("");
 if(videoP==audioP || audioP== imageP || videoP == imageP)
 {
     alert("access denied");
 }
 else
 {
    if(videoP=="1"){            
          $divtemp.append($("#divVideo").clone());
    }
    else if(audioP=="1"){
        $divtemp.append($("#divAudio").clone());
    }
    else if(imageP=="1"){
        $divtemp.append($("#divImage").clone());
    }

    if(videoP=="2"){
        $divtemp.append($("#divVideo").clone());
    }
    else if(audioP=="2"){
        $divtemp.append($("#divAudio").clone());
    }
    else if(imageP=="2"){
        $divtemp.append($("#divImage").clone());
    }

    if(videoP=="3"){
        $divtemp.append($("#divVideo").clone());
    }
    else if(audioP=="3"){
        $divtemp.append($("#divAudio").clone());
    }
    else if(imageP=="3"){
        $divtemp.append($("#divImage").clone());
    }
    $("#divAll").html("");
    $("#divAll").append($divtemp.html());
  }
}


$("#btn").click(function(){
Rearrange(2,3,1);
});

fiddle link is here

Upvotes: 0

Akshay M
Akshay M

Reputation: 1

this problem can be easily done using this small function. No need of any extra div.

function Rearrange_Div(array){  
for(i=0;i<array.length;i++)
    $('#divAll').append($('#' + array[i]));    
}

Upvotes: 0

Adil
Adil

Reputation: 148180

This could be one of possible solutions

Live Demo

function Rearrange(videoP,audioP,imageP){  
   $('#temp').append($('#divAll div'));
    alert($('#temp').html());
    for(i=1;i<4;i++)
    {        
        if(i==videoP)
            $('#divAll').append($('#divVideo'));
        if(i==audioP)
            $('#divAll').append($('#divAudio'));
        if(i==imageP)
            $('#divAll').append($('#divImage'));
    }
}

Edit

If you can pass array of ids to decide the order you will come up with more generic solution.

Live Demo

function Rearrange(arrOfId){  
    $('#temp').append($('#divAll div'));    
    for(i=0;i<arrOfId.length;i++)
        $('#divAll').append($('#' + arrOfId[i]));    
}

$('#btn').click(function(){
     Rearrange(['divImage', 'divAudio','divVideo']);
});

Upvotes: 5

Related Questions