使用 jQuery 对存储在变量中的 Div 元素进行排序

Question

我有一个 HTML dom 元素存储在一个变量中。 HTML 是从 handlebar.js 和使用 jQuery 的 JSON 数据生成的。我需要根据 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 将有很多带有或不带有 id 的 div 标签、嵌套的 div 等。我在这里使用了一个简单的符号。

我在 csv 变量中有排序顺序

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

但是具有上述 id 的 div 标签将明确存在于生成的 HTML 中（var html 将明确包含所有具有相应 id 的 div。）为简单起见，var html 可能有超过 100 个 div，但这 7 个 div

<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>

根据 var sortorder 将明确存在于 var html 中的某个位置以打乱顺序。

我需要的是相同的 var html，但那些 div 是根据传递的值排序的。 var html 中的其他 div 不应该受到影响。

我想我已经足够简短地解释我的要求了，我已经发布了这个问题

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

但这种方法并非一直有效。

Answer 1

这是一个使用来自Paolo Bergantino 发布的here 的swapWith 函数的工作示例。

// 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());

小提琴：http://jsfiddle.net/yiernehr/GtEhj/1/