如何循环jQuery序列化的数据,然后填充div?

时间:2013-01-15 16:30:47

标签: jquery serialization deserialization each

我有来自另一个页面的以下序列化数据字符串(其中一些内容来自复选框,这就是“品牌”重复的原因):

brand=Ford&brand=Dodge&brand=Mazda&year=2013&type=compact

我想填充div标签,其id为“results”:

<div id="results">    
    <div id="brand"></div>    
    <div id="year"></div>    
    <div id="type"></div>    
</div>

我目前正在使用此代码循环数据:

$.each(SelectionData.split('&'), function (index, elem) {    
    var vals = elem.split('=');    
    $('#' + vals[0]).text(decodeURIComponent(vals[1].replace(/\+/g, ' ')));    
});

在我们向表单添加了复选框之前,它一直运行良好。现在,当名称与此处显示的名称相同时,我只能显示字符串中的最后一个值:

这就是我们现在拥有的

<div id="results">
    <div id="brand">Mazda</div>    
    <div id="year">2013</div>    
    <div id="type">compact</div>    
</div>    

我们正在寻找:

<div id="results">
    <div id="brand">Ford,Dodge,Mazda</div>    
    <div id="year">2013</div>    
    <div id="type">compact</div>    
</div>

1 个答案:

答案 0 :(得分:4)

我不明白为什么你希望在名为results的div中格式化结果,但是你的代码试图改变一个元素的文本,其id等于uri参数名称的名称。

无论如何,我想我已经弄明白了你想做什么。 Working Demo

HTML:

<div id="brand"></div>
<div id="year"></div>
<div id="type"></div>

守则:

var SelectionData = 'brand=Ford&brand=Dodge&brand=Mazda&year=2013&type=compact';

$.each(SelectionData.split('&'), function (index, elem) {
    var vals = elem.split('=');
    var $div = $("#"+vals[0]);
    var separator = '';
    if ($div.html().length > 0) {
        separator = ', ';
    }
    $div.html($div.html() + separator + decodeURIComponent(vals[1].replace(/\+/g, '  ')));
});