Question

我的网页是动态生成的，数据 - 跑道 - 链接，数据 - 视频 - 链接，数据 - 后台 - 链接，将来会有更多......

模式总是像这个data-xxx-link，我想要做的是，提取每个中的“xxx”文本将它们存储在一个数组中，这样我就可以使用javascript来引用每个信息

 <li> <a data-season="Designer Profiles" data--link="123" data-video-link="1233"> </a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> 3.1 Phillip Lim</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> Acne Studios</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> Aigner</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Backstage-link="abc" data-video-link="abc"> Alexander McQueen</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> Alexander Wang</a></li>

Answer 1

$('a').each(function(){
 console.log($(this).data())
})

结果将如下所示：

{season: 'Designer Profiles', 'runwayLink':'abc' ...}

小提琴：

http://jsfiddle.net/acrashik/NnHqQ/5/

第2步：从键中删除单词链接

最简单的方法是：

function removeLiknfromKey(data) {
    var jsonstr = JSON.stringify(data);
    var new_jsonstr = jsonstr.replace(/Link":/g, '":');
    var new_obj = JSON.parse(new_jsonstr);
    return new_obj;
}

您将拥有一个仅包含XXX名称的对象。

小提琴：

http://jsfiddle.net/acrashik/NnHqQ/6/

现在你可以很好地使用它，只使用名称：

data.runway, data.video, data.season ... etc

Answer 2

当您使用jQuery访问具有任何data-*属性的元素时，您可以使用data-*函数访问包含所有data()元素的对象。

例如，如果您有这样的元素：

 <a id="elem" data-season="Designer Profiles" data-link="123" data-video-link="1233"> </a>

你可以这样做：

var element_data = $( "#elem" ).data();

现在，element_data中的每个键都将包含每个数据属性。

element_data[ "season" ]; // "Designer Profiles";
element_data[ "link" ]; // "123";
element_data[ "video-link" ]; // "1233";

以下是data()功能的相关文档：http://api.jquery.com/data/ 如您所见，相同的函数充当getter和setter函数。因此，要检索特定的数据键，您可以执行以下操作：

var video_link = $( "#elem" ).data( "video-link" ); // "1233"

您还可以设置 video-link值：

var new_video_link_value = "some other value";
var video_link = $( "#elem" ).data( "video-link", new_video_link_value );

要使用所有这些并回答你的问题，你会做的是这样的事情：

var elems = $("li > a"); // extract all of the relevant anchor tags
var elem_data = [];
$.each( elems, function( index, elem ){
  elem_data.push( $(elem).data() );
});

现在，您将拥有elem_data数组中每个锚标记的所有数据属性。可能更好的想法是为每个锚标记赋予某种标识符，以便您可以将数据映射回它所来自的相关元素。

Answer 3

试试这个：

$('li a').each(function(){
 console.log($(this).data())
});

收集所有数据属性？

3 个答案: