jQuery .insertAfter 仅使用 class 选择器执行一次

Question

我有以下代码，当输入正确的值时，它可以在输入字段后正确插入成功跨度。但我的问题是每次我离开现场时它都会增加跨度。从问题 Jquery insertAfter only once if element exist 我知道我可以在创建时设置跨度的 ID，并在每次事件触发时检查长度以查看它是否已经存在。但是我不确定在使用 class 到 select 字段时该怎么做。

任何有关 class select 的帮助都会有所帮助。

$(".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

试试这个 fiddle：https://jsfiddle.net/8jpc74z8/

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

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

Answer 2

这应该有所帮助。

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/

这会检查以确保下一个元素是一个跨度，它还包括一个删除函数，如果稍后更改值，它将删除有效的跨度，但前提是下一个元素已经是一个有效的跨度.

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

jQuery .insertAfter 仅使用 class 选择器执行一次

jQuery .insertAfter only once with a class selector

html

javascript

jquery

events

jquery-selectors