如果选项卡已经存在，如何防止插入该选项卡

How to prevent the insertion of a tab if one already exists?

本文关键字：选项 何防止 插入 存在 如果      更新时间：2023-09-26

我的问题很简单，我所需要做的就是在已经存在的情况下阻止插入选项卡

问题：我有一个搜索栏，当用户在其中输入名称时，结果被包装在一个类为.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>

我该如何完成

试试这个：演示

$(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();
        }
    })
});

查看这是否适用于

if (to_disp != rel) { //if the clicked tab is not the current account
var a = $(".selected_recipients").children().length;
var b = a++;
var present=false;
var i=0;
while(i<b)
{
if($('#'+i).data('recipient') == to_disp)
present=true;
i++;
}
if(present)
return;
$(".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();
}

如果我们找到匹配集exists=true; ，您可以通过迭代现有选项卡并检查to_show是否存在来实现这一点

exists = false;
    $.each($('.recipient_tab'),function(index,element){
          if($(element).attr('data-recipient') == to_disp){
             exists = true;
          }
    })

  if(!exists){
    $(".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>');
    }
相关文章：