у меня есть это:Преобразование данных атрибутов неупорядоченного списка
<a href="#" data-teste='["apresentacoes/1.jpg", "apresentacoes/2.jpg", "apresentacoes/3.jpg"]'>
<img src="apresentacoes/thumbs/1.jpg" alt="img01"/>
</a>
, как я мог trasnform атрибут 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>
Взгляните на это demo:
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');
Создание строки вместо добавления DOM элементов в цикле будет немного более эффективным.
Как я сказал @adeneo, мне нужно, чтобы он работал с несколькими якорями, и я использую ваши на то, что мне нужно ... и BANG !! Работает сладкий !!! Благодаря! – Preston
var ul = $('<ul />');
$.each($('a').data('teste'), function() {
var li = $('<li />'),
img = $('<img />', {src: this});
ul.append(li.append(img));
});
$('body').append(ul);
Я думаю, что jQuery может автоматически разобрать JSON в атрибуте data для вас. Не 100% уверен, хотя, –
@RocketHazmat - просто изменил его, он действительно создает массив автоматически. – adeneo
+1 - это отличный пример, где 'data()' делает именно то, что вы хотите. Однако иногда 'data()' может иметь неприятные последствия. В тех случаях, когда вы действительно хотите точную строку (например, когда у вас есть 'data-id =" 01 "'), вам нужно использовать 'attr()' вместо этого. – Steve
Попробуйте это:
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);
В каком контексте? Когда вы захотите сделать это преобразование? –