Question

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

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'})

工作正常。

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

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。

，这会导致很多问题

现在我已将结构更改为使用class es而不是id s，即：

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 documentation：

可能的选项是：'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);

使用类序列化？

3 个答案: