1

如何使用 jQuery 比较多个输入字段值以及是否存在匹配警报“有相似值”？

<input value="111"> //similar
<input value="222">
<input value="111"> //similar
<input value="333">

上面的这段 html 代码应该提醒“有相似的值”，因为它有 2 个相同的值。用 jQuery 怎么做？

我试过（以下代码不起作用）：

演示：http: //jsfiddle.net/HpWLQ/

$('input').each(function () {
    var $this = $(this);
    var val = $this.val();
    vals.push(val);
});
for (var i = 0; i < vals.length; i++) {
    for (var n = 0; n < vals.length; n++) {
        if (n !== i) {
            if (vals[i] === vals[n]) {
                alert('There are similar values');
            }
        }
    }
}
4

5 回答 5

2

编辑：为了满足@Raynos，这是一个纯 JS 解决方案。

var vals = {};
var flag = false;
var collection = document.getElementsByTagName('input');
collection = [].slice.call(collection);

collection.forEach(function(element, index, array) {
    if (flag === true) return;
    var i = element.value;
    if (vals[i])
    {
        flag = true;
        alert('There are duplicates!');
    }
    else
    { 
        vals[i] = 1;
    }
});

​</p>

奖励：我通过 jsperf 运行我的解决方案；最后一个显然是迄今为止最快的。

编辑：这可能是解决您的问题的 jQuery 方法（在此工作小提琴）。我原来的答案仍然在下面。

var duplicatefound = false;
$('input').each(function(index, item){
    if (duplicatefound) return;
    val = $(item).val();
    if ($('input[value="' + val + '"]').length == 1) return;
    duplicatefound = true;
    alert('There are similar values');
});

​如果您需要捕获部分或全部重复值的替代解决方案（此处为工作小提琴）：

var collection = $('input');
var duplicates = $.map(collection, function(item){
    val = $(item).val();
    return ($('input[value="' + val + '"]').length > 1) ? val : null;
});

if(duplicates.length > 0) alert('There are similar values');

正如其他人所提到的，您缺少vals作为数组的声明，因此.push()失败了。

您可能会发现基于对象的解决方案更优雅：Working fiddle

var vals = {};

$('input').each(function() {
    var index = $(this).val();
    if (vals[index])
    {
        vals[index]++
    }
    else
    { 
        vals[index] = 1;
    }
});

var duplicates = $.map(vals, function(val, key){
    return (val > 1) ? key : null;
});

if (duplicates.length > 0) alert('There are duplicates!');
于 2012-04-08T12:31:45.207 回答
1

您尚未将 定义为vals数组。你可以像这样定义它

vals = [];

演示

于 2012-04-08T12:23:27.980 回答
1 
EDITED 2:    

function findDuplicates()
{
    var dupCount = 0;
    $('input').each(function () {
         var $currentInput = $(this);
         $('input').each(function () {
              if($(this).val() == $currentInput.val() && $(this) != $currentInput)
                   dupCount++;
         });
     });
     if(dupCount > 0) alert("There are " + dupCount + "duplicates!");
}
于 2012-04-08T12:25:47.370 回答
1 
var inputs = $("input"), similar = [], i, j;

for (i = 0; i < inputs.length; i += 1) {
    for (j = i + 1; j < inputs.length; j += 1) {
        if (inputs[i].value === inputs[j].value) {
            similar.push([i,j]);
        }
    }
}

if (similar.length > 0) {
    alert('There are similar values');
}​

请注意，这仅按顺序比较唯一排列，并且它为您提供相似数组中的匹配索引数组，以防您对此感兴趣。

示例：http: //jsfiddle.net/sjCGy/

您可以使用 document.getElementsByTagName 而不是 jQuery 选择器轻松删除 jQuery 依赖项。

而且由于@Raynos 无法阅读，我会明确说明。

var inputs = document.getElementsByTagName("input"), similar = [], i, j;

for (i = 0; i < inputs.length; i += 1) {
    for (j = i + 1; j < inputs.length; j += 1) {
        if (inputs[i].value === inputs[j].value) {
            similar.push([i,j]);
        }
    }
}

if (similar.length > 0) {
    alert('There are similar values');
}​
于 2012-04-08T12:31:15.247 回答
0

您的代码有效，您只是缺少vals数组的声明 -请参阅更新的小提琴

于 2012-04-08T12:26:48.050 回答