jQuery - 选择包含自定义数据的元素答案

【问题标题】：jQuery - select elements containing custom datajQuery - 选择包含自定义数据的元素
【发布时间】：2013-02-25 16:34:37
【问题描述】：

我有几个元素，比如

<p data-lang-bg="Bulgarian" data-lang-en="English" >Text</p>
<p data-lang-bg="Other bulgarian text" data-lang-en="Other english text" >Text 2</p>

我在编写 jQuery 选择器时遇到了困难，该选择器将选择所有具有数据属性 starting 且带有 data-lang 的元素。有没有可能写出这样的jQuery选择器

【问题讨论】：

对不起，我不相信这是可能的。我可以看到它有什么用处，也许可以向 jQuery 团队提交一份报告。
我认为你做不到。您必须遍历所有元素及其数据集。
真的，这就是类的好处。我只需将class="lang" 添加到每个这样的元素并选择它。
我投票重新打开，因为这个问题更加具体（它是关于数据，而不是任何属性），因此可以有更好的答案。

标签： jquery html css-selectors jquery-data custom-data-attribute

【解决方案1】：

这是我能提出的最接近的建议。

将您的 HTML 更改为这种结构：

<p data-lang='{"bg":"Bulgarian","en":"English"}' >Text</p>

然后使用这个选择器：

$('[data-lang]')

例如，您可以将语言值作为地图获取：

$('[data-lang]').each(function(){
    var localizations = $(this).data('lang'); // parses the map as JSON
    ... use the object, for example localizations['en']
});

在我看来，这是使用自定义数据属性强大功能的正确方法。

【讨论】：

【解决方案2】：

这可能会有所帮助。

http://code.google.com/p/jquery-list-attributes/

(function($) {
      // duck-punching to make attr() return a map
      var _old = $.fn.attr;
      $.fn.attr = function() {
          var a, aLength, attributes,   map;
          if (this[0] && arguments.length === 0) {
                    map = {};
                    attributes = this[0].attributes;
                    aLength = attributes.length;
                    for (a = 0; a < aLength; a++) {
                              map[attributes[a].name.toLowerCase()] = attributes[a].value;
                    }
                    return map;
          } else {
                    return _old.apply(this, arguments);
          }
}
}(jQuery));

来源：http://forum.jquery.com/topic/retrieving-all-attributes-of-a-given-element-and-their-values

【讨论】：

【解决方案3】：

使用自定义选择器：

$.expr[':']['data-lang'] = function (obj) {
    var data = $(obj).data();
    for (i in data) {
        if (data.hasOwnProperty(i)) {
            if (i.indexOf('lang') === 0) {
                return true;
            }
        }
    }
};

然后用$('p:data-lang')选择它们。

【讨论】：

这不起作用。你应该使用$.expr[':']['data-lang'] = function...。