在dom元素中存储数据的最佳实践(1 json或多个数据属性)

Question

我有4篇文章的列表(带有小照片)和1张带有更大照片的文章的地方.当我点击一篇文章时,我将使用javascript在大的地方展示那篇小文章.

要显示带有更大照片的文章,我需要了解文章的3件事:title,detailUrl和photoUrl(更大的照片),我想用javascript来捕捉这个.

Methode 1:使用jQuery .find()搜索DOM

$("#small").find('img').attr('src');

Methode 2:将所有内容存储在单独的数据属性中:

data-title="titel1" data-detailurl="article1.html"

Methode 3:存储JSON字符串

data-json="{ "title": "titel1", "detailurl": "article1.html" }"

我认为第3种方法是最好的(最快？).是对的吗？

这里的html:http://jsfiddle.net/kHbZU/

Answer 1

关于什么jQuery.data？

我认为这比所有选择都好。

    $.data(document.body, "sortElement", "0"); //set value
    $.data(document.body, "sortElement");        //read value