Jquery属性选择

时间:2015-09-20 22:32:17

标签: javascript jquery

我有这个标记,例如:

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

    }
});

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

一个选项:通过数据道具访问它。然而,有一个问题。如果您有data-some-prop数据支持,则jquery规范声明必须将其称为$.data('someProp')而不是some-prop。这是一个catch,因为它必须是一个字符串而不是一个数字 - 选择器不起作用。如果您将属性更改为data-720pdata-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-hddata-mp4-fullhd等字符串开头的内容,如$.data('mp4Hd')