jQuery 去重数组

Question

我有一个文本框数组，就像下面这样

<input type="text" name="txtname[]" value="single" />
<input type="text" name="txtname[]" value="twin" />
<input type="text" name="txtname[]" value="single" />
<input type="text" name="txtname[]" value="dulex" />
<input type="text" name="txtname[]" value="single" />

我想展示这些值给...

单人间 -------- 3
双人间 -------- 1
复式公寓 -------- 1

- foekall

---

为什么要使用相同名称的多个文本字段（不是文本区域）？这些名称为什么要加上“[]”？你所说的“show”是什么意思？在页面上显示吗？在你的示例中，3、1和1的意义是什么？帮助我们帮助你。 - Ates Goral

你想在哪里显示这些值？能否提供更多的上下文信息？ - ipr101

@AtesGoral，使用相同名称和[]的输入是完全有效的，您可以将本质上的数组发送到服务器。 - Explosion Pills

@tandu 我并没有说它是无效的。但请注意，如何处理多个查询参数以及带有“[]”的查询参数（即是否将它们转化为数组）完全取决于你正在使用的后端技术。 - Ates Goral

@AtesGoral 假设他如果不能利用这个功能，他就不会使用它。而且说这完全取决于后端是不准确的。jQuery会适当地序列化数组输入。 - Explosion Pills

@tandu 我使用“查询参数”来引用HTTP请求URL中最终编码的参数。从这个意义上说，你是正确的：jQuery会对传递给ajax（）函数的有效载荷进行一些处理。 - Ates Goral

Answer 1

var txtname = $(':input[name="txtname[]"]').map(function(a,b){ return $(b).val(); }).toArray();

var unique = {};
$.each(txtname, function(a,b){
    if (!unique[b])
        unique[b] = 0;
    unique[b]++;
});

unique 的结果是：

({single:3, twin:1, dulex:1})

---

更新

如果您想将其作为jQuery插件使用：

$.fn.extend({
    unique_count: function(){
        var unique = {};
        this.each(function(a,b){
            var v = $(b).val();
            if (!unique[v])
                unique[v] = 0;
            unique[v]++;
        });
        return unique;
    },
    unique_vals: function(){
        var unique = [];
        $.each($(this).unique_count(), function(a,b){ unique.push(a); });
        return unique;
    }
});

输出结果为：

var $inputs = $(':input[name="txtname[]"]');
$inputs.unique_count() // = Object: {single:3, twin:1, dulex:1}
$inputs.unique_vals()  // = Array:  ["single", "twin", "duplex"]

- Brad Christie

---

如果可以的话，我会给你额外的+1分，因为你能够推断出问题（在其原始形式中）的内容... - Ates Goral

Answer 2

你可以这样说：

var all = $(":text");
var uniqueNames = jQuery.unique(all.map(function(){return $(this).attr("value"); }));
jQuery.each(uniqueNames, function(){
    console.log(this + "---" + all.filter("[value=" + this + "]").length);
});

代码本身就是自我描述的：

1. 查找唯一值
2. 在原始数组中计数

请参见此处示例：http://jsfiddle.net/BPxTd/

- Mo Valipour

Answer 3

看看 jQuery 的 unique 函数：http://api.jquery.com/jQuery.unique/

- endyourif

---

这里不能使用$.unique。它只能识别DOM元素的完全重复，而无法识别相同但不同的元素。 - Blazemonger