条件付きのDOM要素をJQueryでページ上の動的な位置に移動する

私自身の参照、そしておそらくあなたに助けのために、ここで私はどのようにDOM要素の位置を操作したか<div> ページ上の現在アクティブな要素に基づいてレンダリングされたページにステータスメッセージを表示するタグ.これは、ユーザーのアクションからステータスの更新に短いフィードバックループを可能にし、彼らがやっていることにユーザーフォーカスを維持します.
このプロジェクトでは、ユーザー入力に基づいてバックエンドにコントローラのアクションチェックステータスを持っていました.コントローラによって返されたステータスメッセージは、複数の可能性から、ユーザーがテストした適切な要素に直接提供されました.
プロジェクトがRailsを実行すると、ビュー内の「Flash」メッセージ要素にステータスメッセージが表示されます.このフラッシュ要素は、画面の上部にある通常の場所から、ユーザーがクリックした関連する“アクティブ”フォームにチェックしてください.コードコンディショニングを繰り返しずに、各コントローラメソッドに固有のFlashメッセージを表示しないように、私は、JavaScript/JQuery Hackを使用して、独自のHTML要素にカプセル化されたレンダリングされたメッセージを現在アクティブなページ要素内に移動し、ユーザーが必要なものに最も近いフィードバックを与えるように決めました.
コード自体は関数を実行する宣言ですmoveAlerts ページを読み込みます.The moveAlerts 関数は、要素が存在するかどうかをチェックする条件ですalert DOMで、もしあれば、JQueryのprependTo Aの上部に追加するメソッド<div> それはopen .
このコードは次のようになります.そして、私の場合は、「ビュー固有のJavaScript」ブロック内にあります.

<script>
{
  $( document ).ready( moveAlerts );

  function moveAlerts() {
    if (document.getElementsByClassName('alert').length) {
      $( 'div.alert' ).prependTo( 'div.open' );
    }
  }
}
</script>

このようなものを使用するには、ドキュメント内の要素に対応するように編集する必要があります<div> アラートを移動する“オープン”と呼ばれる.もちろん、あなたがRailsを使用していないならば、あなたは<script> ページ固有のJavaScriptブロックを扱うのではなく、ページのHTMLブロックをブロックします.