insertAfter只使用类选择器一次

jQuery .insertAfter only once with a class selector

本文关键字：一次 选择器 insertAfter      更新时间：2024-06-22

当输入正确的值时，我有以下代码可以正确地在输入字段后插入成功跨度。但我的问题是，每次我离开球场时，它都会增加跨度。从问题Jquery insertIf元素只存在一次之后，我知道我可以在创建时设置跨度的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();
    } 
});

这应该会有所帮助。

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中的测试。

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

我在这里所做的只是检查是否有任何已经添加到systemFieldName的同级。如果没有，请添加。

 if($(".systemFieldName +.label-success").length === 0){
相关文章：