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

在这里拉小提琴。