35911


jQueryを使ってtextの入力チェックを行った時に、空の場合はエラーメッセージ表示用の要素を追加したいと考えています。以下のようなソースなのですが、何故か最後のtext要素（data-
title="範囲"のところ）の次にしか要素が追加されません。  
デバッグすると、各要素の下にafterで要素を追加しているはずなんです。  
お力を貸していただけますでしょうか。

HTML

[code]

    <div class="input_unit pt15 pb15">
      <p class="label"><span class="cont_req">必須</span>会社名</p>
      <div class="input_box">
        <input type="text" data-title="御社名">
      </div>
    </div>
    
    <div class="input_unit pt15 pb15">
      <p class="label"><span class="cont_req">必須</span>ふりがな</p>
      <div class="input_box">
        <input type="text" data-title="御社名ふりがな">
      </div>
    </div>
    <div class="input_unit pt15 pb15">
      <p class="label"><span class="cont_req">必須</span>範囲</p>
      <div class="input_box">
        <input type="text" data-title="範囲">
        <p>（例：埼玉県・栃木県など）</p>
      </div>
    </div>
    
[/code]

JS

[code]

    (function($) {
    $(function() {
    $('#confirm').click(function(){
        checkInputAll();
    });
    });  
    function checkInputAll() {
      var $inputTextAreas = $('input[type="text"]');
      var $msgFailure = $('<span class="input_failure"></span>');
      $($inputTextAreas).each(function(){
         if ($(this).val() == "") {
           var message = $(this).data("title") + "をご記入下さい";
           $msgFailure.text(message);
           $(this).after($msgFailure);
      }
    });
    }
    })(jQuery);
    
[/code]


CC BY-SA 3.0
2017-06-27T06:24:33.423
35910
2017-06-27T06:44:55.477
question
jquery
jQueryのループで要素の追加ができません。


JS中の  
`$msgFailure`の変数を使いまわしているせいで、クローンではなく要素の移動になってしまっています。

[after](http://api.jquery.com/after/)

> If an element selected this way is inserted into a single location  
>  elsewhere in the DOM, it will be moved rather than cloned:

afterのAPIは一致する要素が存在した場合はクローンは作成されずマッチした要素の移動が行われます。

ということで変数で使いまわさず、それぞれで設定すれば作成できると思います。

[code]

    (function($) {
    $(function() {
    $('#confirm').click(function(){
        checkInputAll();
    });
    });  
    function checkInputAll() {
      var $inputTextAreas = $('input[type="text"]');
      var $msgFailure = $('<span class="input_failure"></span>');
      $inputTextAreas.each(function(){
         if ($(this).val() == "") {
           $(this).after($('<span class="input_failure"></span>').text($(this).data("title") + "をご記入下さい"));
      }
    });
    }
    })(jQuery);
    
[/code]


CC BY-SA 3.0
2017-06-27T06:44:55.477
35911
2017-06-27T06:44:55.477
22665
35910
answer