1

我正在开发一个响应式网站,我想更改 html div 顺序,同时使其具有响应性。调整浏览器大小后,有什么方法可以更改 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

请记住,对于现代浏览器,您可以仅使用 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 回答
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 回答