Перегруппировать div внутри основного div с помощью jQuery

Question

Перегруппировать div внутри основного div с помощью jQuery

0

Я пытаюсь изменить индекс div внутри основного Div.But, он работает не так, как ожидалось.

Вот мой 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);
});

При нажатии кнопки я пытаюсь изменить положение divs в соответствии с параметрами для функции, но в результате этого нет div в главном div.

Вот jsfiddle

iJade 01 янв. 2014, в 07:35

Источник

0

Я не уверен, что $('#divAll').prependTo('#divVideo'); может работать - он пытается поместить родителя в своего потомка. Но это значит, что ребенок должен стать внуком самого себя.
Barmar 01 янв. 2014, в 06:06
0

Внимательно прочитайте документ: api.jquery.com/prependTo .
leaf 01 янв. 2014, в 06:42

Теги:

javascript

jquery

html

css

3 ответа

0

возможно, это работает для вас.

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

ссылка на скрипку здесь

A.D. 08 нояб. 2017, в 08:23

0

эту проблему можно легко сделать, используя эту небольшую функцию. Нет необходимости в дополнительном div.

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

Akshay M 08 нояб. 2017, в 07:00

Ещё вопросы

Я не уверен, что $('#divAll').prependTo('#divVideo'); может работать - он пытается поместить родителя в своего потомка. Но это значит, что ребенок должен стать внуком самого себя.
Внимательно прочитайте документ: api.jquery.com/prependTo .

Adil · Accepted Answer · 2014-01-01T03-13-00.000Z

Это может быть одно из возможных решений

Демо-версия

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

редактировать

Если вы можете передать массив идентификаторов, чтобы решить заказ, вы придумаете более общее решение.

Демо-версия

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