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

jQueryの配列指定

宜しくお願いします。今、以下の様なコードを作りたいと思っています。
ECサイトでよくある、新着商品が10個並んでたりとかのイメージです

< ul>
<!--↓ここをjqueryでだしたい-->
< li>< a href="hogehoge">< img src="hugahuga.jpg">テキストテキスト</a></li>
< li>< a href="hogehoge">< img src="hugahuga.jpg">テキストテキスト</a></li>
〜〜〜〜
<!--↑ここをjqueryでだしたい-->
< /ul>

毎回HTMLファイルを直接操作するのは面倒なので、jqueryで変数にリンク先、画像リンク先、テキストを定義して、ループで出したいと思っています。

やりたいことはわかってるのですが、実際にどのような記述をすればよいのかネットで探してもいまいちよくわかりませんでした。

具体的なコード記述方法を教えていただけると嬉しいです。

よろしくお願い致します。


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

▽最新の回答へ

1 ● 匿名回答1号
ベストアンサー
var li = [
 {href:'hogehoge', src:'hugahuga.jpg'},
 {href:'hogehoge', src:'hugahuga.jpg'},
 {href:'hogehoge', src:'hugahuga.jpg'},
 {href:'hogehoge', src:'hugahuga.jpg'},
 {href:'hogehoge', src:'hugahuga.jpg'},
];

function makeElement(href, src){
 var img = document.createElement('img');
 img.src = src;
 var a = document.createElement('a');
 a.href = href;
 a.appendChild(img);
 var li = document.createElement('li');
 li.appendChild(a);
 return $(li);
}

var target = $('ul');
li.forEach(function(x, i, arr){
 target.append(makeElement(x.href, x.src))
});

匿名質問者さんのコメント
お早い御回答有り難うございます。無事に表示を行うことが出来ました。 ちなみに、試したのですが、失敗していまいならって覚えようと思うのですが、 < li>< a href="hogehoge">< img src="hugahuga.jpg">テキストテキスト</a></li> ↑のテキストテキスト(商品名)の部分を追加で表示させるにはfunctionにどのように追記すればよいのでしょうか。。。。。 聞いてばかりで申し訳ないのですが、よろしくお願いたします。

匿名回答1号さんのコメント
>> テキストテキスト(商品名)の部分を追加で表示させるにはfunctionにどのように追記すればよいのでしょうか << 失礼しました。見落としてました。 ついでなので、createElementメソッドをやめて、jQueryで作るようにしました。 >|javascript| var li = [ {href:'hogehoge', src:'hugahuga.jpg', text:'piyopiyo'}, {href:'hogehoge', src:'hugahuga.jpg', text:'piyopiyo'}, {href:'hogehoge', src:'hugahuga.jpg', text:'piyopiyo'}, {href:'hogehoge', src:'hugahuga.jpg', text:'piyopiyo'}, {href:'hogehoge', src:'hugahuga.jpg', text:'piyopiyo'}, {href:'hogehoge', src:'hugahuga.jpg', text:'piyopiyo'}, ]; function makeElement(href, src, text){ var img = $('<img/>',{ src: src, }) var a = $('<a>',{ href: href, text: text, prepend: img, }) return $('<li>',{ append: a, }); } var target = $('ul'); li.forEach(function(x, i, arr){ target.append(makeElement(x.href, x.src, x.text)); }); ||<

匿名回答2号さんのコメント
prepend とか append って、[http://api.jquery.com/jQuery/#jQuery-html-attributes:title=マニュアル]にも記載がないようだけれど、どこから見つけてくるんだい?

匿名回答1号さんのコメント
よく読んで見つけてくるんだよ。 >http://api.jquery.com/jQuery/#jQuery-html-attributes:title> As of jQuery 1.4, the second argument to jQuery() can accept a plain object consisting of a superset of the properties that can be passed to the .attr() method. Important: If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset. As of jQuery 1.8, any jQuery instance method (a method of jQuery.fn) can be used as a property of the object passed to the second parameter: <<

匿名回答2号さんのコメント
>> よく読んで見つけてくるんだよ。 << おー。 # スターが付けられなくて、残念 <tt>X-|</tt>

匿名質問者さんのコメント
匿名回答1号様 ご連絡が遅くなりました。お陰様で無事に解決致しました。 ありがとうございます。 また何か機会がございましたら、よろしくお願い致します。
関連質問

●質問をもっと探す●



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