人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryの質問です。

先日、こちらの匿名質問で
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>

このようにしたいのです。
よろしくお願い致します。

●質問者: e-mono
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

こんな感じでしょうか。

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;
}

e-monoさんのコメント
迅速なご対応をありがとうございます。 解決しましたm(_ _)m ご丁寧に解説付きで勉強になります。 また、機会がございましたらよろしくお願い致します。 ベストアンサーとさせて頂きまして、終了させて頂きます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ