Сортировка элементов Div, которые хранятся в переменной с помощью jQuery

Question

У меня есть элемент HTML dom, хранящийся в переменной. HTML создается из handlebar.js & из данных JSON с использованием jQuery. Мне нужно отсортировать это значение в соответствии со значениями из CSV

var html = "<div id = 'qual'>Qual</div> 
<div id = 'exp'>Exp</div> 
<div id = 'ExcludeFromSorting'></div> 
<div id = 'edu'>Edu</div> 
<div class='clear'></div> 
<div id = 'int'>Int</div> 
<div id = 'ref'>Ref</div> 
<div id = 'img'>Img</div> 
<div id = 'obj'>Obj</div>"; 

HTML, как правило, сложный, обычно более 200 строк кода. В html будет много тегов div с или без id, вложенных div и т. Д. Здесь я использую простую нотацию.

У меня есть SortOrder в varibale в формате CSV

var sortorder = "obj,exp,qual,edu,int,ref,img"; 

Но DIV тега с вышеупомянутыми идентификаторами будет определенно существуют в создаваемом HTML (вар HTML будет определенно иметь все эти дивы с соответствующими идентификаторами.) Для того, чтобы сохранить его простой и функциональный вар HTML может иметь более 100 Див, но эти 7 ДИВ-х

<div id = "qual">Qual</div> 
<div id = "exp">Exp</div> 
<div id = "edu">Edu</div> 
<div id = "int">Int</div> 
<div id = "ref">Ref</div> 
<div id = "img">Img</div> 
<div id = "obj">Obj/div> 

согласно вар SortOrder будет определенно существуют некоторые где в вар HTML в перемешиваются порядке.

Что мне нужно, это тот же самый var html, но те div сортируются в соответствии с переданными значениями. Другие div в var html не должны быть затронуты.

Я предполагаю, что я достаточно коротка, чтобы объяснить мое требование, я отправил это уже quesiton

How to sort div elements according to id from a CSV list using jQuery?

, но этот метод не работает все время.

Answer 1

Настоящий рабочий пример с использованием функции swapWith от Paolo Bergantinohere.

// swapWith 
// from @Paolo Bergantino 
// https://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements/698386#698386 
jQuery.fn.swapWith = function(to) { 
    return this.each(function() { 
     var copy_to = $(to).clone(true); 
     var copy_from = $(this).clone(true); 
     $(to).replaceWith(copy_from); 
     $(this).replaceWith(copy_to); 
    }); 
}; 

// return a jQuery object 
function sortDivsByIds($html, ids, current) { 
    current = current || 0; 
    // mark items that needs to be sorted 
    if (current ==0) {  
     $(ids).each(function(i,elem) {$("#" + elem, $html).addClass('sorter');}); 
    } 
    // reorder/iterates 
    $('#' + ids[current], $html).swapWith($('.sorter', $html).eq(current)); 
    if (current+1<ids.length) { 
     return sortDivsByIds($html, ids, current+1) 
    } else { 
     //remove marker 
     $('.sorter', $html).removeClass('sorter') 
     return $html;  
    }; 
} 

Использование

var html = '<div id = "qual" >Qual</div><div id = "exp" >Exp</div><div id = "edu" >Edu</div><div id = "int" >Int</div><div class="another">dont sort me</div><div id = "ref" >Ref</div><div>dont sort me 2</div><div id = "img" >Img</div><div id = "obj">Obj</div>'; 

var sortorder = "obj,exp,qual,edu,int,ref,img"; 

var $htmlsorted = sortDivsByIds($('<div></div>', {html:html}), sortorder.split(',')); 
alert($htmlsorted.html()); 

Fiddle: http://jsfiddle.net/yiernehr/GtEhj/1/