jQuery - select elements containing custom data

Question

I have a couple of elements like

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

I have a difficulties writing a jQuery selector, that will select all elements, who have data attributes starting with data-lang . Is it possible to write such a jQuery selector

Sorry, I don't believe this is possible. I could see how it would be useful however, maybe file a report for this with the jQuery team. — cereallarceny, Feb 25 '13 at 16:41
I don't think you can do that. You'd have to iterate over all elements and their datasets. — Denys Séguret, Feb 25 '13 at 16:43
Really, this is what classes are good for. I would simply add `class="lang"` to each such element and select that instead. — Blazemonger, Feb 25 '13 at 16:52
I vote to reopen because this question is much more specific (it's about data, not any attribute) and thus can have better answers. — Denys Séguret, Feb 26 '13 at 17:23

score 1 · Answer 1 · answered Feb 25 '13 at 16:46

Here's the nearest I can propose.

Change your HTML to this structure :

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

Then use this selector :

$('[data-lang]')

For example, you can get your languages values as maps :

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

This looks to me like the correct way to use the power of custom data attributes.

score 0 · Answer 2 · answered Feb 25 '13 at 16:49

This might help.

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

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

Nathan MacInnes · Answer 3 · 2013-02-25T21:07:13.437

0

Use a custom selector:

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

Then select them with $('p:data-lang').

edited Feb 25 '13 at 21:07

answered Feb 25 '13 at 16:51

Nathan MacInnes

11,033
4
35
50

This doesn't work as is. You should use `$.expr[':']['data-lang'] = function...`. – Denys Séguret Feb 25 '13 at 16:57

jQuery - select elements containing custom data

3 Answers3