Question

I have elements in my DOM with class=”LiveVal:variablepart” and i would like to write a JQuery selector that works even if the elements have other classes on tom of the above. Eg. class=”header LiveVal:varablepart” or class=”LiveVal:varablepart header”.

It works fro me if LiveVal is the first class with:

$('[class^=LiveVal:]').each(function ( intIndex ) { somefunction });

but obviously not if another class is before LiveVal.

In the function I need to extract the variable part. I planned to do like this:

theclass = $( this ).attr('class');
varpart = theclass.replace('\bLiveVal:(.+?)[\s]', '$1');

..but alas, it doesn’t match. I’ve tested the regex on http://gskinner.com/RegExr/ where it seems to work, but it doesn’t in javascript !?

Any help would be greatly appreciated.

Answer 1

It might be somewhat faster to do this with an explicit filter:

 $("*").filter(function() { return /\bLiveVal:/.test(this.className); }).something();

It depends on whether the native “querySelectorAll” does the work, and does it quickly. This also would avoid the “FooLiveVal” problem.

It’s worth noting that in an HTML5 world, it might be better to use a “data-LiveVal” attribute to store that “variable part” information on your elements. Then you could just say:

$('[data-LiveVal]').something();

In the HTML, it’d look like this:

<div class='whatever' data-LiveVal='variable part'>

Since version 1.5, jQuery will fetch stuff in a “data-foo” attribute when you pass the tail of the attribute (the part after “data-“) to the “.data()” method:

  var variablePart = $(this).data('LiveVal');

The “.data()” method will not, however, update the “data-foo” property when you store a new “variable part”.

edit — if you want the value that’s stuffed into the class after your property name prefix (“LivaVal:”), you can extract it like this:

  var rLiveVal = /\bLiveVal:(\S*)\b/;
  $('*').filter(function() { return rLiveVal.test(this.className); }).each(function() {
    var variablePart = rLiveVal.exec(this.className)[1];
    //
    // ... do something ...
    //
  });

(or some variation on that theme).