jQuery - 浮動要素を別の要素に貼り付ける

Question

私はthis jQueryフォーム検証プラグインを使用しています。それは大きい浮動小数点divのフィールドエラーを示しています。

エラーdivが表示され、それに対応する要素が元の場所から移動すると問題が発生します。例えば、以前に隠されていた要素を入力ボックスI .show（）の上に置くと、入力を押し下げますが、その入力に対するエラープロンプトはそのまま残ります。

フローティングdivスティックを対応する要素に/後続させるにはどうすればよいですか？

このプラグインのコードはhereで、例はhereです。

Answer 1

プラグインは、エラーメッセージの絶対位置指定を使用しています。

入力フィールドの位置をドキュメントに対して移動する他のDOM要素を追加する場合は、DOMの実行を変更するスクリプトの後で<div>のすべての手作業で位置を変更する必要があります。

http://api.jquery.com/offset/を使用して入力要素の新しい位置をドキュメントから取得してから、<div>の上部と左側のプロパティに応じて検証を調整することができます。ここで

は、私が何を意味するか、あなたを示す.jsFiddleです： http://jsfiddle.net/ysQCf/2/

CSS

.errorMessage 
{ 
    background-color: red; 
    position: absolute; 
    left: 180px; 
    top: 25px; 
} 

p 
{ 
    display: none; 
} 

HTML

<p id="hidden">if you display this the textbox will move down</p> 
<input id="myInput" type="text" /> 
<div class="errorMessage">stick me to the div</div> 
<br /> 
<input id="show" type="button" value="Show" /> 

javascriptの

$(function() { 
    $("#show").click(function() { 
     // Save the offset of the error against the input 
     var offset = $(".errorMessage").offset(); 
     offset.left -= $("#myInput").offset().left; 
     offset.top -= $("#myInput").offset().top; 

     // Call your script to manipulate the DOM 
     $("#hidden").show(); 

     // Move the error div to it's new position 
     offset.left += $("#myInput").offset().left; 
     offset.top += $("#myInput").offset().top; 
     $(".errorMessage").offset(offset) 
    }); 
});