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

Answer 2

使用这个小功能可以很容易地解决这个问题。不需要任何额外的div。

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

Answer 3

也许这适合你。

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

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

3 个答案: