Question

我有四个文本框[00:00] [00:10] [00:20] [00:00]

代码如下：

<div class="schedules">
     <input type="text" class="schedentry1" id="sch1" value="00:00">
</div>
<div class="schedules">
     <input type="text" class="schedentry1" id="sch2" value="00:00">
</div>
...

我正在遍历每个框检查重复项（在上面的案例中，dupes是[00:00]

我现在如何在div周围添加红色边框以提醒用户他们是傻瓜？

谢谢

$('#row1 .schedentry1').each(function() { 
    times.push( $( this ).val() ); 
});


function find_duplicates(input) {
        duplicates = [input]
        var i, j;
              for (i = 0, j = input.length; i < j; i++) {
                  if (duplicates.indexOf(input[i]) === -1) {
                      if (input.indexOf(input[i], i + 1) !== -1) {
                          duplicates.push(input[i]);

                      }
                  }
              }

              console.log("test " + duplicates[1]);
    }

Answer 1

如果选择器带回的结果超过1，您可以在loop内查看：

$('#row1 .schedentry1').each(function() { 
    var value = this.value;
    times.push( value ); 

    //Get elems that match this value
    var matchingElems = $("#row1 .schedentry1[value=" + value + "]");

    //If more than 1 element returned, add a red border to both
    if (matchingElems.length > 1) {
        matchingElems.css("border","1px solid red");
    }
});

Answer 2

使用对象来跟踪之前已经看过的值。

var values = {}

  // in loop
  if (values[this.value]) {
    $(this).addClass('error')
  } else {
    values[this.value] = true
  }

Answer 3

var ary = [];
$('.schedentry1').each(function () {
    if ($.inArray($(this).val(), ary) > -1) {
        $('.schedentry1[value="' + $(this).val() + '"]').addClass('dupe')
    }
    ary.push($(this).val())
})

var ary = [];
$('.schedentry1').each(function () {
    if ($.inArray($(this).val(), ary) > -1) {
        $('.schedentry1[value="' + $(this).val() + '"]').addClass('dupe')
    }
    ary.push($(this).val())
})

.dupe {
    border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch1" value="00:00">
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch2" value="00:10">
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch3" value="00:20">
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch4" value="00:00">
</div>

Answer 4

你可以做数据

使用循环和数组

records=[];
 $('.schedentry1').each(function () {
if (records.indexOf($(this).val()) > -1) {
    $(this).parent("div").css("border","1px solid red");
}
records.push($(this).val())
 })

使用选择器（jquery本身仍然通过选择器循环并返回数组）

由于您只有4个值，因此您也可以使用选择器

＆＃13;

$('.schedentry1[value="00:00"]:gt(0),.schedentry1[value="00:10"]:gt(0),.schedentry1[value="00:20"]:gt(0)')
.parent("div")
.css("border","1px solid red");

＆＃13;

div{margin:10px 0px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch1" value="00:00"/>
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch2" value="00:00"/>
</div>
    <div class="schedules">
    <input type="text" class="schedentry1" id="sch1" value="00:10"/>
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch2" value="00:10"/>
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch1" value="00:20"/>
</div>
<div class="schedules">
    <input type="text" class="schedentry1" id="sch2" value="00:20"/>
</div>

＆＃13;

如果输入类型=文本有重复的条目，如何更改CSS

4 个答案: