先日、こちらの匿名質問で
http://q.hatena.ne.jp/1412920303
を見ました。
ちょうど自分が取り組もうと思っていたのでそのままソースを使わせてもらったのですが、追加でテキスト欄を1つ増やして<br>で改行させる方法がわからず質問をさせていただこうと思い。。。。
var itemList = [
{href:'http://abc.jp', src:'thumb01.jpg', text:'アイテムの名前', price:'1200'},
{href:'http://abc.jp', src:'thumb02.jpg', text:'アイテムの名前', price:'1200'},
];
function makeElement(href, src, text, price){
var img = $('<img/>',{
src: src,
});
var a = $('<a>',{
href: href,
text: text,
price: price,
prepend: img,
});
return $('<li>',{
append: a,
});
}
var target = $('ul');
itemList.forEach(function(x){
target.append(makeElement(x.href, x.src, x.text+x.price));
});
上記で言うところのtextとpriceの間に<br>を入れるにはどのように追記すれば良いのでしょうか。
<a href="http://abc.co.jp"><img src="thumb01.jpg">アイテムの名前<br>1200</a>
このようにしたいのです。
よろしくお願い致します。
No.1
4973
2154
こんな感じでしょうか。
var itemList = [ {href:'http://abc.jp', src:'thumb01.jpg', text:'アイテムの名前', price:'1200'}, {href:'http://abc.jp', src:'thumb02.jpg', text:'アイテムの名前', price:'1200'}, ]; function makeElement(href, src, text, price){ var img = $('<img/>',{ src: src, }); var a = $('<a>',{ href: href, /* ★ text: text, price: price, ↓のように変えます */ html: text + "<br>" + price, prepend: img, }); return $('<li>',{ append: a, }); } var target = $('ul'); itemList.forEach(function(x){ //★ //target.append(makeElement(x.href, x.src, x.text+x.price)); // ↓のように変えます target.append(makeElement(x.href, x.src, x.text, x.price)); });
jsFiddle で試したのがこちら。
http://jsfiddle.net/uzabdeyk/
多分、<br> を入れるだけでは、値段が画像の下に行ってしまって、期待した通りの見た目にならないと思います。
なので、こんなスタイルも指定してます。
UL LI IMG { float: left; }
7
0
1
2
迅速なご対応をありがとうございます。
2014/11/06 13:20:40解決しましたm(_ _)m
ご丁寧に解説付きで勉強になります。
また、機会がございましたらよろしくお願い致します。
ベストアンサーとさせて頂きまして、終了させて頂きます。