Javascript insertAfter仅使用类选择器执行一次

我有下面的代码，当输入正确的值时，它可以正确地在输入字段后插入一个成功范围。但我的问题是，每次我离开这个领域，它都会增加跨度。从问题中我知道，我可以在创建时设置跨度的ID，并在每次触发事件时检查长度，以查看它是否已经存在。但我不确定在使用类选择字段时如何做到这一点

任何关于类选择器的帮助都会很有帮助

$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);  
    if (val!="" && exists>=0){
      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    } 
});

$（“.systemFieldName”）.blur（函数（）{
var val=$（this.val（）；
var exists=$.inArray（val，所有字段）；
如果（val！=“”&存在>=0）{
$（“有效”）.insertAfter（this.one（）；
} 
});

试试这把小提琴：

我在这里所做的只是检查是否已经添加了systemFieldName的任何兄弟。如果没有，则添加

 if($(".systemFieldName +.label-success").length === 0){

试试这把小提琴：

我在这里所做的只是检查是否已经添加了systemFieldName的任何兄弟。如果没有，则添加

 if($(".systemFieldName +.label-success").length === 0){

这应该会有所帮助

allFields=["121",'test'];
$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);
          //See if the next element is a span with class label.
          var nextEl=$(this).next(); //next element
          var add=true; //add by default 
          if(nextEl.hasClass('label-success')) add=false; //don't add.

    if (val!="" && exists>=0 && add){ //only insert if all conditions are true.

      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    }else if((val == "" || exists < 0) && !add) { // The !add means there is already the Valid span, we can safely remove nextEl, if the value changes.

      nextEl.remove();
    } 
});

allFields=[“121”，“测试]；
$（“.systemFieldName”）.blur（函数（）{
var val=$（this.val（）；
var exists=$.inArray（val，所有字段）；
//查看下一个元素是否是带有类标签的范围。
var nextEl=$（this）.next（）；//下一个元素
var add=true；//默认情况下添加
if（nextEl.hasClass（'label-success'））add=false；//不添加。
如果（val！=“”&&exists>=0&&add）{//仅当所有条件均为真时插入。
$（“有效”）.insertAfter（this.one（）；
}否则，如果（（val==“”| | exists<0）和&&！add）{//！add意味着已经存在有效的跨度，如果值更改，我们可以安全地删除nextEl。
nextEl.remove（）；
} 
});

这将检查以确保下一个元素是一个范围，它还包括一个删除函数，如果以后更改了值，它将删除有效范围，但仅当下一个元素已经是一个有效范围时

在JSFIDLE中使用121或test作为您的测试。

这应该会有所帮助

allFields=["121",'test'];
$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);
          //See if the next element is a span with class label.
          var nextEl=$(this).next(); //next element
          var add=true; //add by default 
          if(nextEl.hasClass('label-success')) add=false; //don't add.

    if (val!="" && exists>=0 && add){ //only insert if all conditions are true.

      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    }else if((val == "" || exists < 0) && !add) { // The !add means there is already the Valid span, we can safely remove nextEl, if the value changes.

      nextEl.remove();
    } 
});

allFields=[“121”，“测试]；
$（“.systemFieldName”）.blur（函数（）{
var val=$（this.val（）；
var exists=$.inArray（val，所有字段）；
//查看下一个元素是否是带有类标签的范围。
var nextEl=$（this）.next（）；//下一个元素
var add=true；//默认情况下添加
if（nextEl.hasClass（'label-success'））add=false；//不添加。
如果（val！=“”&&exists>=0&&add）{//仅当所有条件均为真时插入。
$（“有效”）.insertAfter（this.one（）；
}否则，如果（（val==“”| | exists<0）和&&！add）{//！add意味着已经存在有效的跨度，如果值更改，我们可以安全地删除nextEl。
nextEl.remove（）；
} 
});

这将检查以确保下一个元素是一个范围，它还包括一个删除函数，如果以后更改了值，它将删除有效范围，但仅当下一个元素已经是一个有效范围时

---

在JSFIDLE中使用121或test作为测试。

在if条件中检查

$（this）.val（）.length

。另一种方法是将成功跨度是否已添加作为.systemFieldName类元素的属性来存储。也就是说：

$（this）.attr（'correct

，1）`用于设置，

if（$（this）.attr（'correct'）==1）

用于检查。您应该绑定更改事件，而不是blur.check

$（this）.val（）.length

在if condition中，另一种方法是存储是否已将成功跨度作为.systemFieldName类元素的属性添加。也就是说：

$（this.attr（'correct

，1）`用于设置，

if（$（this.attr（'correct'）==1）

用于检查。您应该绑定一个更改事件，而不是模糊。您不需要同时检查systemFieldName和label-success。label-success也可以完成这项工作，建议使用.change事件而不是模糊。您还需要删除条件不满足（当前代码中缺少）的元素。这里有一个例子：不。在现实场景中，他可能有多个同一类的输入字段，并希望在其旁边添加success div。关于不满足的条件，OP没有要求。您不需要同时检查systemFieldName和label-success。label-success也可以完成这项工作，作为建议，使用.change事件而不是blur。您还需要删除条件不满足（当前代码中缺少）的元素。这里有一个例子：不。在现实场景中，他可能有多个同一类的输入字段，并希望在其旁边添加success div。关于不满足的条件，OP没有要求。工作完美。感谢您添加删除也。非常有帮助，非常好用。感谢您添加删除也。非常有用。