Question

我有一个存储在变量中的HTML dom元素。 HTML是从handlebar.js＆amp;生成的。使用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将有很多div标签，有或没有id，嵌套div等。我在这里使用一个简单的表示法。

我在varibale中有sortorder作为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将defofly存在于var html中的一些shuffled顺序。

我需要的是相同的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/

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

1 个答案: