QA@IT
«回答へ戻る

回答を投稿

解決しているようですが、パフォーマンス的に余り宜しくないのコメント致します。
同じ要素を複製する場合は、$.fn.cloneの多用したほうがいいです。
Firefox、Chrom、IE9以上だとどんな書き方でもパフォーマンス的にさほど変わらないですが、
IE8以下で古いバージョン程愕然とするほどパフォーマンスが悪くなってきます。
可読性とパフォーマンスを考慮するとこんな感じだとおもいます。

var data = {
     a:{id:'aa', hoge:1111, foo:2222}
    ,b:{id:'bb', hoge:3333, foo:4444}
}
var $target = $('#list');
var $src = $("<li><dl><dt><a><img /></a></dt><dd></dd></dl></li>");
var $infosrc = $('<a />');

$.each(data,function(key , value){
    $item = $src.clone();
    $item.attr("id",value['id']);
    $item.find("a:first").attr("href","#");
    $item.find("img:first").attr({"src":"image.jpg","alt":"photo"});
    $info = $item.find("dd:first");
    for(var k in value) {
        if('id'==k) {continue;}
        $infoitem = $infosrc.clone();
        $infoitem.attr('href', '#').text(value[k]);
        $info.append($infoitem);
    }
    $target.append($item);
});
解決しているようですが、パフォーマンス的に余り宜しくないのコメント致します。
同じ要素を複製する場合は、$.fn.cloneの多用したほうがいいです。
Firefox、Chrom、IE9以上だとどんな書き方でもパフォーマンス的にさほど変わらないですが、
IE8以下で古いバージョン程愕然とするほどパフォーマンスが悪くなってきます。
可読性とパフォーマンスを考慮するとこんな感じだとおもいます。

```javascript
var data = {
	 a:{id:'aa', hoge:1111, foo:2222}
	,b:{id:'bb', hoge:3333, foo:4444}
}
var $target = $('#list');
var $src = $("<li><dl><dt><a><img /></a></dt><dd></dd></dl></li>");
var $infosrc = $('<a />');

$.each(data,function(key , value){
	$item = $src.clone();
	$item.attr("id",value['id']);
	$item.find("a:first").attr("href","#");
	$item.find("img:first").attr({"src":"image.jpg","alt":"photo"});
	$info = $item.find("dd:first");
	for(var k in value) {
		if('id'==k) {continue;}
		$infoitem = $infosrc.clone();
		$infoitem.attr('href', '#').text(value[k]);
		$info.append($infoitem);
	}
	$target.append($item);
});
```