Javascript 如何颠倒图像的顺序

我有这个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>

---

如何使用JavaScript/jQuery实现这一点（也必须在IE8这样的旧浏览器中工作）？

追加和预加将移动DOM中的元素，因此只需从上到下迭代并预加跨距，顺序将颠倒

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

或者使用

Array.reverse（）

没有jQuery

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

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

---

追加和前置会移动DOM中的元素，因此只需从上到下迭代并前置跨距，顺序将颠倒

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

或者使用

Array.reverse（）

没有jQuery

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

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

像这样做：

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

或者您甚至可以创建一个通用jQuery函数，如下所示：

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

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

这就是工作。

像这样做：

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

或者您甚至可以创建一个通用jQuery函数，如下所示：

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

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

这就是工作原理。

也许使用jquery：

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

也许使用jquery：

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

---

看起来只有两种不同的图像：星星和星星。交换第一个和最后一个够好吗？不。我刚刚更新了我的问题。看起来只有两个不同的图像：空的星和空的星。交换第一个和最后一个够好吗？不。我刚刚更新了我的问题。我得到了这个错误消息：“null”不是对象（评估“parent.children”）。我得到了这个错误消息：“null”不是对象（评估“parent.children”）。你能提供一个纯Javascript的解决方案吗（没有jQuery）？我这么问是因为我的情况会更好…@drpelz-当然，给我一点时间！奇怪的是我得到了“'null'不是对象（评估'game.getElementsByTagName'）”。ID匹配吗，ID真的是

game\u评级吗？仔细检查，确保没有多个元素具有相同的ID。@drpelz-Oh，使用此选项时，将脚本添加到底部，
标记的前面，否则会出现错误。您能提供一个仅Javascript的解决方案（没有jQuery）吗？我这么问是因为我的情况会更好…@drpelz-当然，给我一点时间！奇怪的是我得到了“'null'不是对象（评估'game.getElementsByTagName'）”。ID匹配吗，ID真的是
game\u评级吗？仔细检查，确保没有多个元素具有相同的ID。@drpelz-Oh，使用时，将脚本添加到底部，
标记的正前方，否则会出现错误。@adeneo:我创建了just for you，我的同事：）正如我所说的，我只是在编辑之前测试了它，它不像你在第一个循环中定位跨距，然后在下一个循环中迭代子循环那样有效，但是，为什么是两个循环？@adeneo：我创建了“只为你”的代码，我的同事：）正如我所说，我只是在编辑之前测试它，它不像你在第一个循环中定位跨距那样有效，然后在下一个循环中迭代子循环，但仍然是，为什么是两个循环？