javascript - 如何颠倒图像顺序

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 .