如何在jquery中删除重复的值

Below code appends text in a box how to avoid entering duplicate values..?

下面的代码在框中附加文本如何避免输入重复值..?

 $('#plan td.n').click(function(){
 $(this).html('B').css("background-color","red");
 $("input:text").val(this.id);

 var toAdd = $("input[name=checkListItem]").val();  
 $(".list").append("<div class = 'item'>" + toAdd + "</div>")//add the seat number to box 



 });

3 个解决方案

#1

I'd probably do something like this below. Hope it helps

我可能会在下面做这样的事情。希望能帮助到你

var lookupObj = {};
var toAdd = $("input[name=checkListItem]").val();
if(!lookupObj[toAdd]) {
    $(".list").append("<div class = 'item'>" + toAdd + "</div>")
    lookupObj[toAdd] = true;
}

#2

Assuming your markup looks like this:

假设您的标记看起来像这样:

<input name="checkListItem" value=""/>
<input type="submit" class="addItem" value="Add/Remove"/>
<div class="list">

</div>

You can add an event which filters items which match the text (exactly) of the current .val() of the checkListItem input, which lets you delete the item in the list if it is a duplicate.

您可以添加一个事件,该事件过滤与checkListItem输入的当前.val()文本(确切)匹配的项目,如果它是重复项,则允许您删除列表中的项目。

$('.addItem').on('click', function() {

  var toAdd = $("input[name=checkListItem]").val(),
      exists = $('.item').filter(function() {
                 return $(this).text() == toAdd;
               });

  if (exists.length > 0) {
    exists.remove();
  } else {
    $(".list").append("<div class = 'item'>" + toAdd + "</div>");
  }

});

https://jsfiddle.net/milesrobinson/563h1fq6/

#3

// if you don't care the performance, this is the easy way
var finded = false;
$(".list > .item").each(function(idx){
    if (toAdd === $(this).html()) {
        finded = true;
        return false;
    }
});

if (!finded) {
     $(".list").append("<div class = 'item'>" + toAdd + "</div>")
}

#1