jQuery Mobile メモ
jQuery Mobileは主にユーザ操作部分をコード量を少なくする事ができるが、だからと言って、平易な言語ではないと思う。
本格的に利用するには、当然、javascriptとjQueryの言語知識が必須。
javascriptに関しては、そのコード効率は別として、とりあえず色々な知識があるが、jQueryには関しては、初級程度の言語教本を一冊読んだ程度。
javascriptは結局の所、配列とクラス概念・クラス設計、イベントバブルを理解していれば、私の場合十分だった。
DOM操作は、ごりごり書けば良いし。
今回jQueryで要素に子要素を付加する事に対して、数日間はまってしまった。
色々なサイトなりを読んでも、「こうやったら できた」という内容はあるのだが、それがどう言った原理・原則を元にした内容なのか不明な箇所が多く、更に、同じようなコードでも動作しない場合もあり、とても困っていた。
作成前
<ul id=”scrn”>
</ul>
作成後
<ul id=”scrn”>
<li > <img /> </li>
<li > <img /> </li>
<li > <img /> </li>
</ul>
作成前の<ul>に対して子要素<li> 更に<li>の内部に<img> を次々と作成したい。
特にappendに対しては、と書いた場合、1回目は期待通りに動作するが
$(<ul>).append(<li>)
$(<li>).append(<img>)
2回実行すると正しく実行しない。
まぁ考えれば当然なのだが…
結局このような場合はどうするかと言えば
$(<ul>).append(<li id=”001″>)
.chirdlen(li#001)
.append(<img>)
のようにするば良い。
2回実行する時には、2回目は、
$(<ul>).append(<li id=”002″>)
.chirdlen(li#002)
.append(<img>)
になる。
要は、明示的に、どの要素に対して追加するかを、chirdlenで一意になるように
指示してやれば良い。
もちろん記述だけの変更であるが、こうい方法だってできる
var liobj = $(<li id=”002″>)
var imgobj = $(<img>)
$(<ul>).append(liobj)
.chirdlen(li#002)
.append(imgobj)
まぁ この意味合いを知っておけば、色々な記述形式がある。
$(<ul>)という形式が、要素一つを示しているのでなく、要素集合を表している事を理解すれば、なんともない事だと思える。
TAGS: jQuey | 2019年12月27日
