使用jQuery重新排列主div内的div

iJade 发表于 Dev

爱玉

我正在尝试在主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

公平的

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

现场演示

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数组来确定顺序，那么您将提出更通用的解决方案。

现场演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。