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/

これは、次の要素がスパンであることを確認するためにチェックし、それはまた、値が後で変更された場合、それが有効なスパンを削除することをremove関数が含まれていますが、場合にのみ、次の要素はすでに有効なスパンです。

jsFiddleのテストとして121またはtestを使用します。

Answer 2

このバイオリンを試してみてください：https://jsfiddle.net/8jpc74z8/

は、私がここでやっているすべてはsystemFieldNameに任意の兄弟がすでに追加があるかどうかを確認することです。そうでない場合は、追加します。

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