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>

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/11/06 11:38:24
  • 終了:2014/11/06 13:24:12

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4605ベストアンサー獲得回数19432014/11/06 12:07:11

こんな感じでしょうか。

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;
}
id:miyabi0307

迅速なご対応をありがとうございます。
解決しましたm(_ _)m

ご丁寧に解説付きで勉強になります。

また、機会がございましたらよろしくお願い致します。
ベストアンサーとさせて頂きまして、終了させて頂きます。

2014/11/06 13:20:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません