jQuery .insertAfter nur einmal mit einem Klassenselektor

Question

Ich habe den folgenden Code, der richtig funktioniert, um eine Erfolgsspanne nach einem Eingabefeld einzufügen, wenn ein korrekter Wert eingegeben wird. Aber mein Problem ist, dass es jedes Mal, wenn ich das Feld verlasse, die Spanne hinzufügt. Aus Frage Jquery insertAfter only once if element exist Ich weiß, dass ich die ID der Spanne bei der Erstellung festlegen konnte und überprüfen Sie die Länge jedes Mal, wenn das Ereignis ausgelöst wird, um zu sehen, ob es bereits vorhanden ist. Aber ich bin mir nicht sicher, wie das geht, wenn ich eine Klasse zur Auswahl der Felder verwende.

Jede Hilfe mit Klassenselektoren wäre hilfreich.

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

Dies sollte helfen.

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/

Dies prüft das nächste Element, um sicherzustellen, eine Spanne ist, es enthält auch eine Funktion remove, dass, wenn der Wert auf später geändert wird, wird es die gültige Spanne entfernen, aber nur, wenn die Das nächste Element ist bereits eine gültige Zeitspanne.

Verwenden Sie 121 oder testen Sie als Test in der jsFiddle.

Answer 2

diese Geige Versuchen: https://jsfiddle.net/8jpc74z8/

Alles, was ich hier tue, ist zu prüfen, ob es ein Bruder des systemFieldName ist bereits hinzugefügt. Wenn nicht, dann füge hinzu.

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