jquery - 使用类序列化？

Question

我目前在标签中使用id值，即：divserialize

HTML：

<div class="column">
    <div id="portlet_1">some content here</div>
    <div id="portlet_2">some content here</div>
    <div id="portlet_3">some content here</div>
</div>

jQuery：

$(this).sortable('serialize', {key: 'item'})

这很好用。

问题是我需要允许用户动态选择他/她想要在屏幕上的哪个 portlet，如果他们愿意，他们可以在屏幕上多次使用相同的 portlet，即：

HTML：

<div class="column">
    <div id="portlet_1">some content here</div>
    <div id="portlet_1">some content here</div>
    <div id="portlet_1">some content here</div>
    <div id="portlet_2">some content here</div>
    <div id="portlet_2">some content here</div>
    <div id="portlet_3">some content here</div>
</div>

id由于相同的 s ，这会导致很多问题。

现在我已经将结构更改为使用classes 而不是ids，即：

HTML：

<div class="column">
    <div class="portlet_1">some content here</div>
    <div class="portlet_1">some content here</div>
    <div class="portlet_1">some content here</div>
    <div class="portlet_2">some content here</div>
    <div class="portlet_2">some content here</div>
    <div class="portlet_3">some content here</div>
</div>

如何基于class而不是序列化id？

id这是一个更完整的代码摘录，因为它基于s序列化，所以它不起作用：

jQuery：

$(".column").sortable({
    connectWith: '.column',
    update: function(event, ui) {
        var that = this;

        $.ajax({
            url: 'some web service here',
            type: 'POST',
            data: { strItems:$(that).sortable('serialize', {key: 'item'}) },
            error: function(xhr, status, error) {
                //some error message here
            },
            success: function() {
                //do something on success
            }
        });

    }
});

抱歉，忘了说我使用的是旧的 jquery 1.4 版。

Answer 1

试试这个 ：

$(this).sortable('serialize', {key: 'item', attribute: 'class'});

jQuery UI 1.8文档：

可能的选项是：'key'（用你想要的任何东西替换 part1[]）、'attribute'（测试除 'id' 之外的另一个属性）和'expression'（使用你自己的正则表达式）。

Answer 2

您可以手动完成：

data: function(){
    var mySerial;
    $(this).find('div').each(function(){
        var raw = $(this).attr('class');
        var el = raw.split('_');
        mySerial += el[0]+"[]="+el[1]+"&";
    });
    return mySerial.substr(0,(mySerial.length-1));
}

这应该返回如下内容： portlet[]=1&portlet[]=1&portlet[]=2...

Answer 3

这是这个要点。

jQuery('.class_input').serializeAnything()

https://gist.github.com/4482228

(function($) {

$.fn.serializeAnything = function() {

var toReturn = [];

$.each(this, function() {

if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type))) {

var val = $(this).val();

toReturn.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( val ) );

}

});

return toReturn.join("&").replace(/%20/g, "+");

}


})(jQuery);