2016.2.4
0からはじめるPHP#77【appendの仕様】
昨日残る機能は1つとか言っときながら実は3つほどありましたので完成がまた先延ばしになってしまいました。
ということで、この画像はその内の一つである返信履歴の表示です。残る必須機能は履歴の全取得(メソッド自体は完成してます)と、メッセージ通知ですね。
メッセージ通知の仕様はまだ固まってませんが、あまり凝ったことはせず、ページアクセス時にまだ見ていないメッセージの数をカウントして通知させる、という方針でいこうかなと思っています。
それ専用のDatetimeカラムも作ってあり、実装方針は既に固まってるので、後は手を付ければ良いだけ･･････だと信じています。（笑）
画像見てる感じでは、いい感じにできつつあると思いません？（笑）
完成が目に見えて分かるようになってからは、SNS作るとかドキドキするー！面白いー！！って感じで日々作り進めています。
年度明けぐらいにはRC版に突入して、オフの人たちに僕が作ったSNSです！宣伝してください♥って言うのすごい楽しみです←
･･････年度明けは無理か、たぶんそんなサクサク進まなさそう笑
あ、で今日の話題はjavascriptのappend()というメソッドです。
0から始める"PHP"でなんでjavascriptの話なんですかとか言われそうですけど、気にしないでください。（何）
|
<div1> <div2></div> <div3></div> </div> |
例えばこんな構造のものをくっつけたかったら、自然に考えると以下のようになります。
var html=$("selector");
html.append("<div1>");
html.append("<div2></div>");
html.append("<div3></div>");
html.append("</div>");
|
<div1></div> <div2></div> <div3></div> <div1></div> |
なんとappendには終了タグを自動付与するお節介機能が存在するんですね。
appendメソッドは、テキストをセレクタにappend(付加)するメソッドだと思ってたんですが、実はそうでなくDOM要素をappendするという意味でappendを使ってるわけですね。
つまり、上の例では"div～～"というstringではなく"divブロック"をappendしているという解釈です。なので終了タグがないと困るわけですね。
鬱陶しい機能ですが、動的に終了タグのない要素がポコポコくっつけられたらマジで困るんでしょうね。
では、入れ子にしたい時どうしたら良いのでしょう。
答えだけ書きます。
var html=$("<div1>").append("<div2>").append("<div3>");
$("親要素").append(html);
一旦変数に格納して、それを親要素にappendする、という方針で行きます。
まず最初にdiv1を生成し、それにdiv2,div3をappendし、それを本来appendしたかった要素にappendする、ということです。
これ見つけるのにまた2時間ぐらいかかった気がします。eachでぶん回してなかったらもうちょっとラクに解決できたんですが･･････（苦笑）
多分もう新しくする話はないので、次回からは運営方面の話を考えようかなーと思ってます。