javascript - 使用 jQuery 在主 div 中重新排列 div

Question

我正在尝试重新排列主 Div 中的 div 索引。但它没有按预期工作。

这是我的html代码

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

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

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

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

这是 jQuery 代码

    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);
});

单击按钮后，我试图根据参数更改 div 的位置以发挥作用，但结果是主 div 中没有 div。

这是 jsfiddle

Answer 1

这可能是一种可能的解决方案

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'));
    }
}

编辑

如果您可以传递 ID 数组来决定顺序，您将想出更通用的解决方案。

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']);
});