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，page [] = 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

几天前，我已经为自己做了一件事：

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/

Answer 4

无表格使用。

$(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;
    });
});

使用jquery序列化div中的所有id

4 个答案: