javascript - Jquery属性选择

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]; });