jqueryの.after関数にCSSを追加するにはどうすればいいですか？

Question

$(document).ready(function() {  
    $('#btnSoumettre').click(function(){  
     $('.must').each(function(index) { 

      if(!$(this).val()) { 
       $(this).css('border-color','red'); 
       $(this).after("*");   
      }  
     }); 
    }); 
}); 

ここはjQueryの単純なビットです。私が知りたいことは、文字列を追加して赤くするにはどうすればいいですか？コメントをもとに

Answer 1

EDITED：

あなたは値がないときに境界線をアクティブにするには、次の操作を行い、その値が入力されたときにそれを削除することができます。

• .after（）は不要なので削除してください。
• 値を入力すると、境界を削除するelseを追加します。

$(document).ready(function() { 
 
    $('#btnSoumettre').click(function() { 
 
    $('.must').each(function(index) { 
 
     if (!$(this).val()) { 
 
     $(this).css('border-color', 'red'); 
 
     $(this).next('span').css('display', 'inline'); 
 
     } else { 
 
     $(this).css('border-color', 'initial'); 
 
     $(this).next('span').css('display', 'none'); 
 
     } 
 
    }); 
 
    }); 
 
});

span { 
 
    display: none; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
first <input class="must" value="value1"><span> required</span><br> 
 
second - no value <input class="must"><span> required</span><br> 
 
third <input class="must" value="value3"><span> required</span><br> 
 
fourth no value <input class="must"><span> required</span><br> 
 
<button id="btnSoumettre">validate</button>