jquery - データ属性を順序なしリストに変換する

Question

私はこれを持っています：

<a href="#" data-teste='["apresentacoes/1.jpg", "apresentacoes/2.jpg", "apresentacoes/3.jpg"]'>
    <img src="apresentacoes/thumbs/1.jpg" alt="img01"/>
</a>

どうすればdata-teste属性をこれに変換できますか:

<ul>
   <li><img src="apresentacoes/1.jpg"></li>
   <li><img src="apresentacoes/2.jpg"></li>
   <li><img src="apresentacoes/3.jpg"></li>
</ul>

Answer 1

var ul = $('<ul />');

$.each($('a').data('teste'), function() {
    var li  = $('<li />'),
        img = $('<img />', {src: this});

    ul.append( li.append(img) );
});

$('body').append(ul);

フィドル

Answer 2

このデモを見てください:

function createList(data) {
    var parts = ['<ul>'], i = 0;

    for (; i < data.length; i++) {
         parts.push('<li><img src="' + data[i] + '"></li>');
    }
    parts.push('</ul>');

    return parts.join('');
}

どこvar data = $(this).data('teste');

http://jsfiddle.net/nnfwh/

ループ内に DOM 要素を追加する代わりに文字列を作成すると、もう少し効果的です。

Answer 3

これを試して：

var div = "<ul>";
var a = $("a").attr("data-teste");
a = JSON.parse(a);
var len = a.length;
for(var i=0;i<len;i++){
    div += "<li><img src='"+a[i]+"'/></li>";
}
if(div != ""){
    div += "</ul>";
}
$("body").append(div);

ここでフィドル。