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で変数にﾘﾝｸ先､画像ﾘﾝｸ先､ﾃｷｽﾄを定義して､ﾙｰﾌﾟで出したいと思っています｡
やりたいことはわかってるのですが､実際にどのような記述をすればよいのかﾈｯﾄで探してもいまいちよくわかりませんでした｡
具体的なｺｰﾄﾞ記述方法を教えていただけると嬉しいです｡
よろしくお願い致します｡
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))
});
ﾍﾞｽﾄｱﾝｻｰ