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

试试这个小提琴：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/

这将检查以确保下一个元素是一个span，它还包括一个remove函数，如果稍后更改该值，它将删除有效的span，但仅限于下一个元素已经是有效的span。 / p>

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

jQuery .insertAfter只有一次类选择器

2 个答案: