JqueryによるDOM操作に関するしつもん

Question

jqueryの超初心者です

jsonから読み込んだデータをもとに<li>を作成して<ul>オブジェクトに追加するという処理を行っています。

var ul = $('<ul>');
		
for (var i = 0; i < json.length; i++) {
   ul.append('<li><a href="' + json[i].image.replace('.jpg', '_big.jpg') + '"><img src="' + json[i].image + '" width="150" height="90"></a><br><p>' + json[i].caption + '</p></li>');
}

aタグにクリックイベントを登録するために、これを各要素を個別に作成した後に、<li>に追加する形に修正したいと思い以下のコードを実装しました。

var ul = $('<ul>');

for (var i = 0; i < json.length; i++) {

var img = $('<img>');
img.src = json[i].image;
img.width = "150";
img.height = "90";
			
var a = $('<a>');
a.href = json[i].image.replace('.jpg', '_big.jpg');
a.append(img);
//aタグにクリックイベント登録
			
var li = $('<li>');
li.append(a);
li.append('<br><p>' + json[i].caption + '</p>');
			
ul.append(li);

}

しかし、このような実装をしても変更前と同じように動作しません。
どこが誤っているのかわかる方ご教授お願いします。

Answer 1

JSON はただの文字列なので JSON.parse や jQuery.parseJSON でパースしなければ Object 型にはなりません。
実際にはパース出来ているのかもしれませんが、変数名が json のまま(パースしたら JSON ではありません)なので念のため。

$('<img>') や $('<a>') は jQuery オブジェクトなので [0] を付与して初めて DOM の要素ノードを参照できます。
最も、DOM の要素ノードが必要なだけなら createElement を使っても良いように思われますが…。

Re: peishun さん

Comments

[peishun]

０を付与しないと要素を参照できないのですね。勉強になりました。

Answer 2

あとから追加する要素にクリックイベントを付けるのであれば、jQuery().on() が使えます。

var ul = $( '<ul>' );
for ( var i = 0; i < json.length; i++ ) {
    ul.append( '<li><a href="' + json[ i ].image.replace( '.jpg', '_big.jpg' ) + '"><img src="' + json[ i ].image + '" width="150" height="90"></a><br><p>' + json[ i ].caption + '</p></li>' );
}
$( 'body' ).append( ul );

$( document ).on( 'click', 'a', function( e ) {
    // クリックに割り当てたイベント
});

【jQuery 便利なonを使おう（on click) - Qiita】
http://qiita.com/shizuma/items/d561f37f864c3ebb5096

【.on() | jQuery API Documentation】(公式リファレンス)
http://api.jquery.com/on/

Comments

[peishun]

なるほど、後から要素を指定してクリックイベントを登録できるんですね。勉強になりましたありがとうございます。ただ、jsonから取得したデータをクリックイベント登録時に用いたいのでこの方法ではできないようです

Answer 3

2番目のスクリプトの冒頭で・・・

var ul = $('<ul>');

として <ul> 要素を作成していますが、これをページ内に追加しましたか？
スクリプトで動的に作成した要素は、jQuery.append() などでDOM要素ツリーのどこかに入れてあげないと、画面に表示されません。
例えば次のようにすると body タグの末尾に追加できます。

$('body').append(ul);

ご参考になれば。

Comments

[peishun]

ご指摘ありがとうございます。ただ、その操作はすでに行っていました。それも記載すべきでした。申し訳ないです。

Answer 4

var li = $('li');

こうでは？

var li = $('<li>');

追記：
think49さんの回答も踏まえて、こんな風に書くとよいかも。

var img = $('<img>', {
  src : json[i].image,
  width : "150",  height : "90"
});
var a = $('<a>', {
  href : json[i].image.replace('.jpg', '_big.jpg')
});
a.append(img[0]); // appendされるときはobj[0]

Comments

[peishun]

ありがとうございます。そこは気づきませんでした。修正したら少し改善しました。しかしまだ完全に期待通りの動作をしないので誤りが残っていると思われます。

[peishun]

わかりやすくコードを書いてくださりありがとうございます。無事解決しました。