javascript - 替换 DIV jQuery

Question

我有这个 HTML 结构：

<div class="row">
    <div id="game1">Game 1</div>
    <div id="game2">Game 2</div>
</div>
<div class="row">
    <div id="game3">Game 3</div>
    <div id="game4" class="fav">Game 4 (fav)</div>
</div>
<div class="row">
    <div id="game5" class="fav">Game 5 (fav)</div>
    <div id="game6">Game 6</div>
</div>
<div class="row">
    <div id="game7">Game 7</div>
    <div id="game8"class="fav">Game 8 (fav)</div>
</div>

我需要按收藏夹（class=fav）对这些进行排序。这就是我为此做的事情：

    var favs  = [];
    var rest  = [];

    var items = $('body').find('.row').each( function() { 
        $(this).children('div').each( function(i) {
            if ( $(this).hasClass('fav') ) { 
                favs.push( $(this) );
            }
            else {
                rest.push( $(this) );
            }
        }); 
    });

我的问题是我需要检查每个项目，items其中将是<div>ofclass=row并将子项替换<divs>为id=game#. 这是我的尝试：

$(items).each( function() {
        $(this).children('div').each( function() {

            if ( favs.length == 0 ) {
                //use rest[]
                myText = $(rest[0]);

                $(this).text( $(myText).text() );
                rest.splice(0, 1);
            }

            else {
                //use favs[];
                toUse = $(favs[0]);
                $(this).text( $(toUse).text() );
                favs.splice(0, 1);
            }

        });
    });

看起来正在发生的事情是，当我开始覆盖当前 div 的文本时，它正在替换我rest数组中的某些内容。我已经确定了 1000 次rest不包含任何这些值，但它们仍然被打印出来。这是输出的样子：

Game 4 (fav)
Game 5 (fav)
Game 8 (fav)
Game 4 (fav)
Game 5 (fav)
Game 8 (fav)
Game 8 (fav)
Game 8 (fav)

所以第 4 场 (fav)、第 5 场 (fav) 和第 8 场 (fav) 应该进入favs并且它们被正确打印出来，前三个之后的所有内容都是错误的。

结果应该是：

Game 4 (fav)
Game 5 (fav)
Game 8 (fav) 
Game 1
Game 2
Game 3
Game 6
Game 7

有人可以提供一些可能导致这种情况的见解吗？

谢谢

Answer 1

问题是 favs 和 rest 实际上是对 div 的引用，如果您更改其中的文本，则引用保持不变，因此当您稍后去拿起文本时，它不是您第一次时的样子迭代它。因此，您将“Game 1”替换#game1为“Game 4 (fav)”，并在 rest[0] 中引用它。然后，当您尝试处理 rest 时，rest[0] 的文本是“Game 4 (fav)”。解决方案是推送文本值而不是 DOM 引用。

$(document).ready(function(){    
    var favs  = [];
    var rest  = [];

    var items = $('.row > div');
    items.each( function() { 
            if ( $(this).hasClass('fav') ) { 
                favs.push( $(this).text() );
            }
            else {
                rest.push( $(this).text() );
            }
    });

    items.each( function() {
            if ( favs.length == 0 ) {
                //use rest[]
                myText = rest.shift();
                $(this).text(myText);
              }

            else {
                //use favs[];
                toUse = favs.shift();
                $(this).text(toUse);
            }
    });
});

jsfiddle：http: //jsfiddle.net/qhnDD/11/

或者：

$(document).ready(function(){    
    var favs  = [];
    var rest  = [];

    var items = $('.row > div');
    items.each( function() { 
            if ( $(this).hasClass('fav') ) { 
                favs.push( $(this).text() );
            }
            else {
                rest.push( $(this).text() );
            }
    });
    favs=favs.concat(rest);
    items.each( function() {
        $(this).text(favs.shift());
    });
});

对于超紧凑版本：

var all = $('.row .fav').remove().toArray()
   .concat($('.row div').remove().toArray());
$('.row').each(function () {
        $(this).append(all.shift());
        $(this).append(all.shift());
});

jsfiddle：http: //jsfiddle.net/qhnDD/23/

Answer 2

在这种情况下，您不应该使用 .splice() 。您应该使用 .pop() 或 .shift()。

Answer 3

我可以建议一种不同的方法吗？我认为你把它复杂化了。

同样使用@Robert McKee 解决方案，您会得到如下结果：<div id="game3">Game 8 (fav)</div>，这似乎是错误的。

这个怎么样：

var $favs = $(".row .fav").remove();
var $rest = $(".row div").remove();

var i = 0;
$(".row").each(function () {
    for (var j = 0; j < 2; j++) {
        var elem = (i < $favs.length) ? $favs.eq(i) : $rest.eq(i - $favs.length);
        $(this).append(elem);
        i++;
    }
});

工作演示

Answer 4

这是我的镜头。. . 它有效，但不可否认，我很累，所以它可能不是我写过的最有效的代码。:D

JS：

<script type='text/javascript'>
    //the parent div needs to be accessible to the function
    var $sortParent;

    // set up a new row div for cloning and initialize the current row
    var $newRow = $("<div></div>").addClass("row");
    var $currentRow = $newRow.clone();

    $(document).ready(function () {
        // initialize the parent div
        $sortParent = $(".divSort");

        //get all of the original rows
        var $currentRows = $sortParent.find(".row");

        // get the favorite games
        var $favorites = $currentRows.find(".fav");
        // get the other games
        var $others = $currentRows.find(":not(.fav)");

        // re-add the favorite games at the top
        $favorites.each(function(){
            addGame($(this));
        });
        // re-add the other games a the bottom
        $others.each(function(){
            addGame($(this));
        });

        // if the current row only has one game in it, it needs to be added now
        if ($currentRow.children().length === 1) {
            $sortParent.append($currentRow);
        }
        // remove all of the original rows
        $currentRows.remove();
    });

    // function that adds a game to a new row
    function addGame(currentGame) {
        // add the current game to the current row
        $currentRow.append(currentGame);

        // if the current row already has 2 games in it, append it to the parent and set up a new row
        if ($currentRow.children().length > 1) {
            $sortParent.append($currentRow);
            $currentRow = $newRow.clone();
        }
    }
</script>

起始 HTML：

<div class="divSort">
    <div class="row">
        <div id="game1">Game 1</div>
        <div id="game2">Game 2</div>
    </div>
    <div class="row">
        <div id="game3">Game 3</div>
        <div id="game4" class="fav">Game 4 (fav)</div>
    </div>
    <div class="row">
        <div id="game5" class="fav">Game 5 (fav)</div>
        <div id="game6">Game 6</div>
    </div>
    <div class="row">
        <div id="game7">Game 7</div>
        <div id="game8"class="fav">Game 8 (fav)</div>
    </div>
</div>

生成的 HTML：

<div class="divSort">
    <div class="row">
        <div class="fav" id="game4">Game 4 (fav)</div>
        <div class="fav" id="game5">Game 5 (fav)</div>
    </div>
    <div class="row">
        <div class="fav" id="game8">Game 8 (fav)</div>
        <div id="game1">Game 1</div>
    </div>
    <div class="row">
        <div id="game2">Game 2</div>
        <div id="game3">Game 3</div>
    </div>
    <div class="row">
        <div id="game6">Game 6</div>
        <div id="game7">Game 7</div>
    </div>
</div>