使用jQuery对存储在变量中的Div元素进行排序 [英] Sort Div Elements that are stored in a variable using jQuery

问题描述

我有一个存储在变量中的HTML dom元素. HTML是从handlebar.js&使用jQuery从JSON数据中提取.我需要根据CSV值

I have a HTML dom element stored in a variable. The HTML is generated from handlebar.js & from JSON data using jQuery. I need to sort this according to values from 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等.我在这里使用一种简单的符号.

The HTML is usually be complex, usually be more than 200 lines of code. The html will have lot of div tags with or without id's, nested div's etc. I am using a simple notation here.

我的变序中有csv的排序顺序

I have sortorder in a varibale as csv

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

但是具有上述ID的div标签将明确存在于生成的HTML中(var html将明确具有所有具有相应ID的div.)为简单起见，var html可能具有100个以上的div，但是这7个div

But div tag's with the above id's will definetly exist in the generated HTML (var html will definetly have all those divs with corresponding id's.) To keep it simple the var html might have more than 100 div's but these 7 div's

<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中按改组顺序明确地存在某些地方.

according to var sortorder will definetly exist some where in the var html in shuffled order.

我需要的是相同的var html，但这些div会根据传递的值进行排序. var html中的其他div不应受到影响.

What i need is the same var html but those div's sorted according to the values passed. The other div's in the var html should not get affected.

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

I guess i am brief enough to explain my requirement, I posted this quesiton already

如何使用jQuery根据CSV列表中的ID对div元素进行排序?

，但是此方法并非一直有效.

but this method is not working all the time.

推荐答案

以下是使用 Paolo的swapWith函数的有效示例Bergantino 在此处.

// 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元素进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！