轉換數據屬性無序列表

我有這樣的：轉換數據屬性無序列表

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

來源

2013-11-14 Preston

在什麼情況下？你什麼時候想要做這個轉變？ –

看看這個演示：

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元素將是一個小更有效。

來源

2013-11-14 17:57:53 dfsq

正如我對@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);

FIDDLE

來源

2013-11-14 17:53:19 adeneo

我認爲jQuery可能爲您自動解析數據屬性中的JSON。不是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);

Fiddle here.

來源

2013-11-14 17:57:56 Hiral

轉換數據屬性無序列表

回答

相關問題