如何反轉圖像順序

Question

我有這個div容器：

<div id="game_rating">
    <span class="rating_star">
        <img src="../images/star.png">
    </span>

    <span class="rating_star">
        <img src="../images/star.png">
    </span>

    <span class="rating_star">
        <img src="../images/star_half.png">
    </span>

    <span class="rating_star">
        <img src="../images/star_empty.png">
    </span>

    <span class="rating_star">
        <img src="../images/star_empty.png">
    </span>
</div>

現在，我想使用“ rating_star”類反轉跨度的順序，因此如下所示：

star_empty.png
star_empty.png
star_half.png
star.png
star.png

如何使用JavaScript / jQuery實現此功能（也必須在IE8等舊版瀏覽器中工作）？

Answer 1

這樣做：

$("#game_rating").each(function(){
    var $this = $(this);
    $this.children().each(function(){
        $this.prepend(this);
    });
});

或者甚至可以創建一個通用的jQuery函數，如下所示：

jQuery.fn.reverseNodes = function() {
    return this.each(function(){
        var $this = $(this);
        $this.children().each(function(){
            $this.prepend(this);
        });
    });
};
$('#game_rating').reverseNodes();

這是有效的DEMO 。

Answer 2

追加和前置會移動DOM中的元素，因此只需從上到下進行迭代並前置跨度，順序就會相反。

$.each($('#game_rating > span'), function() {
    $(this).prependTo($(this).parent());
});

小提琴

或使用Array.reverse()

$('#game_rating').append($('#game_rating > span').get().reverse());

小提琴

沒有jQuery

var game  = document.getElementById('game_rating');
var spans = game.getElementsByTagName('span');

for (var i=spans.length; i--;) {
    game.appendChild(spans[i]);
}

小提琴

Answer 3

也許與jQuery：

var parent = $('#game_rating');
var spans = parent.children('span');
parent.append(spans.get().reverse());