Question

我有3个div，默认情况下，我显示1 2 3。在每次刷新时，div位置必须改变如下：

1-2-3
2-3-1
3-1-2
...

Answer 1

HTML：

<div id="wrapper">
    <div id="div1">DIV1</div>
    <div id="div2">DIV2</div>
    <div id="div3">DIV3</div>
</div>
<button id="refresh">Refresh</button>

纯JS： http://jsfiddle.net/CKCpb/1/

var chain = [
    document.getElementById("div1"),
    document.getElementById("div2"),
    document.getElementById("div3")
],
wrapper = document.getElementById("wrapper"),
refresh = document.getElementById("refresh");

refresh.onclick = function() {
    chain.push( chain.shift() );
    for ( var i=0, len = chain.length; i < len; i++ ) {
        var el = chain[i];
        wrapper.removeChild(el);
        wrapper.appendChild(el);
    };
};

jQuery解决方案： http://jsfiddle.net/CKCpb/2/

var $wrapper = $("#wrapper"),
    $refresh = $("#refresh");

$refresh.bind("click", function() {
    $($wrapper.children()[0])
        .appendTo($wrapper);
});

Answer 2

这样的事情应该有效

HTML：

<div class="divs">
    <div>DIV1</div>
    <div>DIV2</div>
    <div>DIV3</div>
</div>
<button id="refresh">Refresh</button>

JS：

$("#refresh").click(function(e) { 
  var div = $(".divs div:first").remove();
  $(".divs").append(div);
  e.preventDefault();
});

http://jsfiddle.net/NJJbe/

Answer 3

<?php
session_start();
if (!isset($_SESSION['pos']))
    $_SESSION['pos'] = 1;
else {
    if ($_SESSION['pos'] == 3)
        $_SESSION['pos'] = 1;
    else
        $_SESSION['pos']++;
}
?>
<html>
<head>
<script>
var position = <?php echo $_SESSION['pos']; ?>;
for (var i=0;i<(position-1);$i++) {
    var div = $(".divs div:first").remove();
    $(".divs").append(div);
}
</script>
</head>
<body>
<div id="divs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
</div>
</body>
</html>

使用jquery更改页面刷新时div的位置

3 个答案: