Сериализация всех идентификаторов в div с использованием jquery

Question

Я пытаюсь переупорядочить функцию перетаскивания страниц в моей CMS.Поскольку некоторые из страниц имеют подстраницы, у нас есть много списков, вложенных в списки.Пример кода:

$(document).ready(function(){ 

    $(function() {
            $('#contentLeft ul').sortable({ 
            update: function() {
                var order = $('#contentLeft ul').sortable('serialize');
                alert(order);
            }                                         
        });

    });

}); 


<div id="contentLeft">


<ul id="sitemap"> 
<li id="page_1" class="page_container"> 
Test
<ul>
<li id="page_20">Nested one</li>
<li id="page_30">nested 2</li>
<li id="page_40"> Nested 6</li>
</ul>
</li> 
<li id="page_4" class="page_container"> 
Test
</li> 
<li id="page_5" class="page_container"> 
Test
</li> 
</ul>

</div>

В приведенном выше примере, когда я перемещаю вещи и сериализую ul, я получаю список возвращаемых элементов списков верхнего уровня (page [] = 1, page []= 4, страница [] = 5).Мне нужно, чтобы он сериализовал ВСЕ теги li, включая дочерние теги li, и получил что-то вроде (page [] = 1, page [] = 20, page [] = 30, page [] = 40, page [] = 4, страница [] = 5).

Я попытался применить сериализацию довольно просто к

или как: var order = $ ('li'). Sortable ('serialize');и var order = $ ('ul'). sortable ('serialize');

но не повезло.

Может ли кто-нибудь указать мне правильное направление?

Большое спасибо

Answer 1

$(function() {
    $('#contentLeft ul').sortable({
        update: function() {
            var order3 = [];
            $('#contentLeft ul li').each(function(){
                order3.push($(this).attr('id').replace(/_/g, '[]='))
            });
            alert(order3.join('&'));
        }
    });
});

попробуйте здесь: http://jsfiddle.net/MXCZx/1/

Answer 2

В качестве альтернативы вы можете сделать так:

// serialize input elements within a specific #id
$('#id :input').serialize();


// serialize a specific element in the form
$('input[name=inputName]').serialize();

Answer 3

Использовать без формы.

$(document).ready(function () {
//select html element
    $('li').click(function () {
        $(this).toggleClass('selected');
        if ($('li.selected').length == 0)
            $('.select').removeClass('selected');
        else
            $('.select').addClass('selected');
        counter();
    });
//ajax send id html element    
    $(document).on('click', 'li', function () {
        $(this).toggleClass("check");
        var form = document.querySelectorAll('li.selected'); //select the need classes
        var id = {};//empty array
        for (var i = 0; i < form.length; i++) {
            id[i] = form[i].id; //fill the array
        }
        $.ajax({
            url: "/site/search",
            type: 'post',
            dataType: "json",
            data: {"selected": id},
            success: function(data, response, textStatus, jqXHR) {
                console.log(data);
            }
        });
        return false;
    });
});

Answer 4

сделали для себя несколько дней назад:

function serializeUL(ul){
    var children = {};
    $(ul).children().each(function(){
        var li = $(this),
            sub = li.children('ul');
        children[this.id] = sub.length > 0  ? serializeUL(sub) : null;
    })
    return children;
}

serializeUL ('# sitemap') // вернет вас после JSON

{
   "page_1": {
        "page_20":null,
        "page_30":null,
        "page_40":null
   },
   "page_4":null,
   "page_5":null
} 

бит расширен пример использования:

http://jsfiddle.net/acrashik/E2Vte/8/