Question

我有这个标记，例如：

<div class="playlist-item" data-mp4="01.mp4" data-mp4-720p="02.mp4" data-mp4-1280p="03.mp4"></div>

我想选择'data-mp4'属性以便它们出现在html中，所以我最终得到这样的数组：

[{quality: 'default', path:01.mp4}, {quality: '720p', path:02.mp4}, {quality: '1280p', path:03.mp4}]

我试过这个但是看起来不同的浏览器对这些属性的命令不同：

var track = playlist.find("div[class='playlist-item']");

$.each(track[0].attributes, function (i, e) { 
    if(/mp4/.test(e.name)){ 

    }
});

Answer 1

当HTML代码被解析为元素时，HTML中的属性顺序不会被保留，因此您无法按照它们在HTML中的顺序获取属性。

如果您希望按特定顺序使用属性值，则必须在从元素中获取属性值后对其进行排序。

示例：

var attr = Array.prototype.slice.call(track[0].attributes);
attr.sort(function(x, y){
  return x.name < y.name ? -1 : x.name > y.name ? 1 : 0;
});

要确定属性的顺序，您可以使用地图将名称转换为值：

var attr = Array.prototype.slice.call(track[0].attributes);
var map = { "data-mp4" : 1, "data-mp4-720p": 2, "data-mp4-1280p": 3 };
attr.sort(function(x, y){ return map[x.name] - map[y.name]; });

Answer 2

一个选项：通过数据道具访问它。然而，有一个问题。如果您有data-some-prop数据支持，则jquery规范声明必须将其称为$.data('someProp')而不是some-prop。这是一个catch，因为它必须是一个字符串而不是一个数字 - 选择器不起作用。如果您将属性更改为data-720p和data-1280p，则可以使用以下内容：

var track = $('.playlist-item')[0]
var qualityArray = [
    {quality: 'default', path: $(track).data('mp4')},
    {quality: '720p', path: $(track).data('720p')},
    {quality: '1280p', path: $(track).data('1280p')}
]

如果您想要更具描述性的数据名称，可以使用以data-mp4-hd和data-mp4-fullhd等字符串开头的内容，如$.data('mp4Hd')

Jquery属性选择

2 个答案: