Is it possible to get back the value that matched a partial selector in jQuery?

Question

I've coded a function that works but that is ugly. I'm pretty sure there's a better way to do what I want and it probably turned out very ugly because I'm not really good in javascript :D

I have some html elements that may have a class called view-in-box or view-in-box-640-480. If the class is just view-in-box, a dialog will appear with some defaults width and height, else it will show up with the width and height specified in the class name.

The html elements class can be something like: class='note comment ui-button view-in-box-300-200 footer star'.

What I've done until now is select all the elements that have view-in-box in it with:

$('body').delegate('[class*=view-in-box]','click', function(){

Then I take the whole class attribute and I loop on it to check whether I can find a view-in-box or not. Here is the (simplified) code:

$('body').delegate('[class*=view-in-box]','click', function(){
    ...
    var class_array = $(this).attr('class').split(" ");
    for (var i = 0; i < class_array.length; i++) {
        if (class_array[i].search('view-in-box-') != -1) {
            box_text = class_array[i];
            break;
        }
    }

    if (box_text !== null) {
        box_array = box_text.split('-');
        ....
    }

    ....
    return false;
});

So I was wondering, is there a way to get back directly inside my function what matched the view-in-box predicate? Like for example view-in-box or view-in-box-233-455. Or do I really have to get the full class attribute and split it.

Hope I'm clear, javascript confuses me! Thanks.

hasClass can take patterns with '*'?! And I still need to get those width and height values. — godbout, Jan 17 '12 at 10:38
`hasClass` is not really appropriate. You have to know the name of the class as it doesn't support wildcards and anyway, it does not return the class name, just a boolean. Question is, why don't you apply the width/height through the css class itself ? — Didier Ghys, Jan 17 '12 at 10:42
Because I would need to create a lot of css classes for all the width/height I might need right? And even have to remember to create classes when I add a new width/height. With my method you just sent whatever you need and the dialog gets the right size dynamically. Or I'm dumb and I'm missing something evident? Like dynamic css? :D — godbout, Jan 18 '12 at 11:46

score 2 · Accepted Answer · answered Jan 17 '12 at 10:46

2

You should use a custom data-* attribute instead of classnames to store this data.

So instead of:

<div class="note comment ui-button view-in-box-300-200 footer star"></div>

Do yourself a favor and use:

<div class="note comment ui-button view-in-box footer star" data-size="300-200"></div>

Then you can just use $(el).data('size') to get the value using jQuery.

answered Jan 17 '12 at 10:46

Mathias Bynens

144,855
52
216
248

Also, I would recommend the use of `data-height` and `data-width` instead of `data-size`. – falsarella Jan 17 '12 at 11:13
@falsarella If you need the separate values, definitely! – Mathias Bynens Jan 17 '12 at 21:14
Oh. This is nice. Thanks a lot! – godbout Jan 18 '12 at 11:48

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

Yes, it is possible:

But, I would recommend Mathias solution.

edited May 23 '17 at 11:48

Community

1
1

answered Jan 17 '12 at 11:24

falsarella

12,217
9
69
115

1

Thanks for the links! Yeah I think Mathias solution is better for that case, but your links will be useful in some other situations I'm sure. – godbout Jan 18 '12 at 11:49

Salman A · Answer 3 · 2012-01-17T13:17:29.517

A regular expression can be used to simplify your code; you can replace the JavaScript string functions (split, indexOf, search etc) with a regular expression:

/(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;

// (?:^|\s) -- non-capturing group that matches beginning of string or white-space
// (-\S+)?  -- optional capturing group that match hyphen + one or more non-white-space characters
// (?:\s|$) -- non-capturing group that matches end of string or white-space

Example:

var rx = /(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;
rx.exec("view-in-box");                                            // ["view-in-box", undefined]
rx.exec("view-in-box-foobar ");                                    // ["view-in-box-foobar ", "-foobar"]
rx.exec("view-in-box-foo-bar");                                    // ["view-in-box-foo-bar", "-foo-bar"]
rx.exec("note comment ui-button view-in-box-300-200 footer star"); // [" view-in-box-300-200 ", "-300-200"]
rx.exec("view-in-boxXXXX");                                        // null
rx.exec("XXXXview-in-box");                                        // null
rx.exec("XXXX-view-in-box");                                       // null

Is it possible to get back the value that matched a partial selector in jQuery?

3 Answers3