jQueryの配列指定

Question

匿名質問者

jQueryの配列指定

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

< ul>

　< li>< a href="hogehoge">< img src="hugahuga.jpg">テキストテキスト</a></li>
　< li>< a href="hogehoge">< img src="hugahuga.jpg">テキストテキスト</a></li>
　〜〜〜〜

< /ul>

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

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

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

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

回答の条件

1人5回まで

登録：2014/10/10 14:51:43
終了：2014/10/14 13:17:09

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

人力検索はてな jQueryの質問です。先日、こちらの匿名質… 2014-11-06 11:38:33

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Accepted Answer · 2014-10-10T17:35:52+09:00

No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/10/10 17:35:52

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

他4件のコメントを見る

テキストテキスト（商品名）の部分を追加で表示させるにはfunctionにどのように追記すればよいのでしょうか

失礼しました。見落としてました。
　
ついでなので、createElementメソッドをやめて、jQueryで作るようにしました。

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

2014/10/11 11:16:47

prepend とか append って、マニュアルにも記載がないようだけれど、どこから見つけてくるんだい？

2014/10/11 16:59:01

よく読んで見つけてくるんだよ。

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:
jQuery() | jQuery API Documentation

2014/10/11 17:13:56

よく読んで見つけてくるんだよ。

おー。

＃スターが付けられなくて、残念　X-|

2014/10/11 18:27:38

匿名回答1号様

ご連絡が遅くなりました。お陰様で無事に解決致しました。
ありがとうございます。

また何か機会がございましたら、よろしくお願い致します。

2014/10/14 13:16:57

jQueryの配列指定

ベストアンサー

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/10/10 17:35:52

コメント（0件)

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

トラックバック

jQueryの配列指定

ベストアンサー

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。詳しくはこちら2014/10/10 17:35:52

コメント（0件)

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

トラックバック

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/10/10 17:35:52