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

FIDDLE

或Array.reverse()

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

FIDDLE

没有jQuery

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

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

FIDDLE

Answer 3

也许是jquery：

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

如何逆转图像的顺序

3 个答案: