.next()でうまく取得できない

Question

フォーム入力でフォーカスが外れた時に発火するエラーメッセージ表示のプログラムを作りたいです。

inputの直後に空のdivタグを入れておき、それにメッセージを入れるなどの処理をするつもりなのですが、divタグが.next()でうまく指定できません。

inputに使えなかったりするんでしょうか？
ご回答宜しくお願いします。

consoleには、
S.fn.init [prevObject: S.fn.init(1)]
length: 0
prevObject: S.fn.init [input#Cnt2.form__area.js-cntitem.js-cnttext.js-require]
[[Prototype]]: Object(0)
と出ます。

.next()外すとinputは取得で来ていると思います。

<p class="form__tag">お名前</p>
<p>
  <input id="Cnt2" class="form__area js-CntItem js-CntText js-Require" name="entry.1841666190" type="text" placeholder="例）山田太郎">
  <div class="errorBox"></div>
</p>

$('.js-CntItem').blur(function () {
    // 必須(js-Require)に中身が入っていない場合
    if ($(this).hasClass('js-Require') && $(this).val() == '') {
      console.log($(this).next());
      $(this).next('.errorBox').html('<p class="error-message">必須項目が入力されていません。</p>')
    }
  })

Answer 1

<p>の中に<div>は入れられず、<div>の直前に</p>があるものとみなされるため（MDN）、<input>と<div>は.nextで参照できる兄弟要素ではなくなっています。

Comments

[maisumakun]

<p>の途中で<div>に出くわすと、<div>の直前に</p>があるものとみなされます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/p

Answer 2

pタグは文書の段落なのでそういう用途でないならdivタグなど特殊な属性のないものを利用してください