jQuery .insertAfter 仅使用一次类选择器

Question

当输入正确的值时，我有以下代码可以正常工作以在输入字段后插入成功范围。但我的问题是每次我离开现场时它都会增加跨度。从问题Jquery insertAfter only once if element exist 我知道我可以在创建时设置跨度的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();
    } 
});

Answer 1

这应该会有所帮助。

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

https://jsfiddle.net/ym66f48p/2/

检查以确保下一个元素是一个跨度，它还包括一个删除函数，如果稍后更改该值，它将删除有效的跨度，但仅当下一个元素已经是一个有效的跨度时。

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

Answer 2

试试这个小提琴：https://jsfiddle.net/8jpc74z8/

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

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