1

レスポンシブにしながらhtml divの順序を変更したいレスポンシブWebサイトに取り組んでいます。ブラウザのサイズを変更した後に HTML の順序を変更する方法はありますか? この場合、insertBefore、insertAfter、および .replaceWith() は役に立ちません。

デスクトップ html

<div class="list-wrapper">
    <div class="col c1">column 1</div>
    <div class="col c2">column 2</div>
    <div class="col c3">column 3</div>
    <div class="col c4">column 4</div>
    <div class="col c5">column 5</div>
</div>

レスポンシブ html

<div class="list-wrapper">
    <div class="col c1">column 1</div>
    <div class="col c5">column 5</div>
    <div class="col c2">column 2</div>   
    <div class="col c3">column 3</div>
    <div class="col c4">column 4</div>

</div>
4

3 に答える 3

0

使用.resize()方法：JQUERY

$( window ).resize(function() {

    console.log( 'Handler for .resize() called.' );
    var newC2 = $( ".col c2" ).replaceWith( $(".col c5") );
    var newC3 = $( ".col c3" ).replaceWith( newC2 );
    var newC4 = $( ".col c4" ).replaceWith( newC3 );
    $( ".col c5" ).replaceWith( newC4 );

});
于 2013-11-09T18:39:02.540 に答える
0 
  Posting below the working html.

  <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .list-wrapper { float:left; width:100%; border:1px solid #000}
    .list-wrapper .col {float:left; border:1px solid #f00; width:18%;}

    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script language="javascript" type="text/javascript">

    $(document).ready(function(){

    var $modules = $('.list-wrapper .col');
    var order    = [1,3,4,0,2];

    var elements = [];
    $.each(order, function(i, position) {
        elements.push($modules.get(position));
    });

    $('.list-wrapper').html(elements); 
    });

    </script>
    </head>

    <body>

    <div class="list-wrapper">
        <div class="col c1">column 1</div>
        <div class="col c2">column 2</div>
        <div class="col c3">column 3</div>
        <div class="col c4">column 4</div>
        <div class="col c5">column 5</div>
    </div>


    <div class="list-wrapper">
        <div class="col c1">column 1</div>
        <div class="col c2">column 2</div>
        <div class="col c3">column 3</div>
        <div class="col c4">column 4</div>
        <div class="col c5">column 5</div>
    </div>

    <div class="list-wrapper">
        <div class="col c1">column 1</div>
        <div class="col c2">column 2</div>
        <div class="col c3">column 3</div>
        <div class="col c4">column 4</div>
        <div class="col c5">column 5</div>
    </div>
    </body>
    </html>
于 2013-11-10T08:46:24.777 に答える
0

最新のブラウザーでは、CSS だけでこれを実現できることに注意してください (フレキシブル ボックスを使用) 。

.list-wrapper{display:flex;flex-direction:column}

.c1{order:1}
.c2{order:3}
.c3{order:4}
.c4{order:5}
.c5{order:2}

(すべてのブラウザーで機能させるには、ベンダー プレフィックスを使用する必要があります) http://jsfiddle.net/Xdn2G/2/
のデモ

于 2013-11-09T18:55:32.580 に答える