javascript - 如果标签已经存在，如何防止插入标签？

Question

我的问题很简单，我需要做的就是防止插入一个已经存在的标签

问题: 我有一个搜索栏，当用户输入名称时，结果被包装在一个带有 class.result_container_2 的 div 中，现在当用户点击这个选项卡，一个选项卡被插入到另一个类为 .selected_recipients 的 div 中。现在我想让脚本检测标签是否已经插入 我已经用 .each() 尝试过但没有成功

脚本:下面是生成标签的当前脚本

$(document).on('click', ".result_container_2", function() {
  var to_disp = $(this).data('recipient_disp');
  var to_show = $(this).data('recipient_show');
  var rel = $(this).attr('rel'); //the current account

  if (to_disp != rel) { //if the clicked tab is not the current account
    var a = $(".selected_recipients").children().length;
    var b = a++;
    $(".selected_recipients").show().append('<span class="recipient_tab" id="' + b + '" data-recipient="' + to_disp + '"><span style="display:block;float:left;">' + to_show + '</span><span class="recipient_remove">x</span></span>');
    $(".display_found_query_cont_mess_drawer").hide();
  }

});

//---for removing recipient----
$(document).on('click', ".recipient_remove", function() {
  $(this).parent(".recipient_tab").remove();

  if ($(".selected_recipients").children().length == 0) {
    $(".selected_recipients").hide();
  }
})

/*-------recipients tabs -------*/

.selected_recipients {
  display: inline-block;
  padding: 5px 0px;
  border-bottom: 1px solid #CCC;
  width: 100%;
}
.recipient_tab {
  float: left;
  display: block;
  padding: 4px;
  margin-left: 5px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2;
  background-image: -moz-linear-gradient(#777, #666);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#666));
  background-image: -webkit-linear-gradient(#777, #666);
  background-image: -o-linear-gradient(#777, #666);
  background-image: -ms-linear-gradient(#777, #666);
  background-image: linear-gradient(#777, #666);
}
.recipient_remove {
  padding: 2px;
  float: left;
  display: block;
  margin-left: 5px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2;
  background-color: #C0C0C0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="selected_recipients"></div>

<div class="result_container_2" rel="test" data-recipient_disp="mark" data-recipient_show="mark">mark</div>

<div class="result_container_2" rel="test" data-recipient_disp="mark1" data-recipient_show="mark1">mark1</div>

<div class="result_container_2" rel="test" data-recipient_disp="test" data-recipient_show="test">test **the tab with this name wont be created**</div>

如何实现

Answer 1

试试这个:DEMO

$(document).ready(function(){

    $(document).on('click', ".result_container_2", function() {
        var to_disp = $(this).data('recipient_disp');
        var to_show = $.trim($(this).data('recipient_show'));
        var rel = $(this).attr('rel'); 

        if (to_disp != rel && !$('.selected_recipients .recipient_tab[data-recipient="'+to_show+'"]').length) 
        { 
            var a = $(".selected_recipients").children().length;
            var b = a++;
            $(".selected_recipients").show().append('<span class="recipient_tab" id="' + b + '" data-recipient="' + to_disp + '"><span style="display:block;float:left;">' + to_show + '</span><span class="recipient_remove">x</span></span>');
            $(".display_found_query_cont_mess_drawer").hide();
        }

    });

    $(document).on('click', ".recipient_remove", function() {
        $(this).parent(".recipient_tab").remove();
        if ($(".selected_recipients").children().length == 0){
            $(".selected_recipients").hide();
        }
    })
});