久々にjQueryの勉強を実施。今回は要素を移動する『.append()』メソッドを使って実装。ページを表示したときにidで指定した要素（画像だったりテキストだったり）を別の場所に移動して表示するものに仕上げたので備忘録。
今回は要素をカテゴリーごとに振り分けるイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.ページを表示したときにidを指定した要素を移動した状態で表示する。
STEP1-1. 画面を作成する
それでは２つのカテゴリー（上部の「野菜」と「果物」）と画像を画面に表示させていきます。
カテゴリー「野菜」とカテゴリー「果物」にはcssで大きさと枠線を指定し、idを付与します。
画像はひとまず画面下部に表示させ、それぞれにidを付与します。
今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
#area1{
border:solid green 5px;
height:200px;
padding:10px;
font-weight:bold;
font-size: 20px;
}
#area2{
border:solid pink 5px;
height:200px;
padding:10px;
font-weight:bold;
font-size: 20px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row">
<div class="col-md-6" id="area1"><p>野菜</p></div>
<div class="col-md-6" id="area2"><p>果物</p></div>
</div>
<div class="row">
<br>
<span id="f1"><img src="./img/apple.jpeg" alt=""/></span>
<span id="f2"><img src="./img/banana.jpeg" alt=""/></span>
<span id="v1"><img src="./img/endo.jpeg" alt=""/></span>
</div>
</div>
ここまでだと、以下の画像みたいになっていると思います。↓
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. ページを表示したときにidを指定した要素を移動した状態で表示する
jQueryでページを表示したときに要素を移動した状態で表示させます。
さっそく『.append()』メソッドを使用します。
以下の内容を「sample.js」に記述します。
//要素を移動する
$(function(){
var area1 = $('#area1');
var area2 = $('#area2');
var f1 = $('#f1');
area1.append(v1);
area2.append(f1);
});
どうですか？
以下の画像みたいに画像がカテゴリーの中に表示されていたらOKです。
※画像が移動した状態で表示されない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
