替换DIVs 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> class=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); } }); }); 。以下是我的尝试：

rest

看起来正在发生的事情是，当我开始编写当前div的文本时，它正在替换我的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) 不包含任何这些值的1,000次，但它们仍然被打印出来。这是输出的样子：

favs

所以第4场比赛（收费），第5场比赛（收藏）和第8场比赛（收藏）都应该在Game 4 (fav) Game 5 (fav) Game 8 (fav) Game 1 Game 2 Game 3 Game 6 Game 7 中，并且正确打印出来，前三场之后的所有内容都是错误的。

结果应该是：

{{1}}

有人可以提供一些可能导致此问题的见解吗？

由于

Answer 1

问题是，favs和rest实际上是对div的引用，如果你改变它们中的文本，引用仍然是相同的，所以当你以后去拿起文本时，它不是它的原样当你第一次迭代它。因此，您将#game1中的“游戏1”替换为“游戏4（收藏）”，并在休息[0]中引用它。当你尝试处理休息时，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++;
    }
});

<强> WORKING DEMO

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>