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

FIDDLE

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

Fiddle here.

将数据属性转换为无序列表

3 个答案: