How to get ul structure from HTML

Question

I create a configuration page that splits the category tree into 3 columns for easy viewing, for example:

**Column 1**            **Column 2**             **Column3**  
   Category1               Category3                Category5
    *SubCategory1*         Category4                  *SubCategory5*
   Category2                 *SubCategory4*           *SubCategory6*
     *SubCategory2*        etc.
     *SubCategory3*  

I use jsp, jquery and struts2. I am trying to adjust the display order of categories / subcategories. Now I show the structure in this way, and I can drag them from a column to another, sort the categories of the column and sort the subcategories using jquery and directly modify the HTML, but I don’t understand how to get the data of the changed structure to save it over my DB.

Answer 1

- , , , , , :

function refactor() {
    var array = jQuery.makeArray($('ul#remapped > li:not(.target)'));
    var mappedArray = jQuery.map(array, function(i) {
        var merged = $(i).find('ul.merge > li:not(.target) > span');
        return {
            column: $(i).children('span').text(),
            merged: jQuery.map(jQuery.makeArray(merged), function(mi) { return { column: mi.innerText }; })
        };
    });

    var xml = '<columns>';
    jQuery.each(mappedArray, function(index, item) {
        xml += '\n\t<column>';
        xml += '\n\t\t<name>' + item.column + '</name>';
        if (item.merged.length > 0) {
            xml += '\n\t\t\t<merged>';
            jQuery.each(item.merged, function(mindex, mitem) {
                xml += '\n\t\t\t\t<name>' + mitem.column + '</name>';
            });
            xml += '\n\t\t\t</merged>';
        }
        xml += '\n\t</column>';
    });
    xml += '\n</columns>';

    $('div#result').load('/Tools/Csv/Refactor', { mapping: xml });
}

, , . , .

$('ul # remapped') - ( ), , , , DOM, DOM XML-, ​​ .

, , , , , , .

Answer 2

, . ajax- , , CategorySucategories. db, .