Замена 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); 
      } 

     }); 
    }); 

Похоже, что происходит в том, что, когда я начинаю писать по тексту текущего 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

Могу ли я предложить другой подход? Я думаю, вы усложняете это.

Также с использованием решения @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 2

Проблема в том, что Favs и остальные фактически ссылки на дивы, и если изменить текст внутри них, ссылка остается тем же, поэтому, когда вы идете, чтобы забрать текст позже, его это не то, что было, когда вы сначала повторили его. Таким образом, вы заменяете «Игру 1» на #game1 на «Игра 4 (fav)», и у вас есть ссылка на нее в покое [0]. Когда вы пытаетесь обработать отдых, текст отдыха [0] - «Игра 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 3

Вы не должны использовать .splice() в этом сценарии. Вы должны использовать .pop() или .shift().

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>