How can I check classes that ends with?

Question

I have some elements such as:

<div class="button 17-facebook-dashboard-check">Elem1<div>
<div class="button 18-google-dashboard-check">Elem2<div>
<div class="button 19-twitter-dashboard-check">Elem3<div>
<div class="button">Elem4<div>

and a handler on:

$('.button').click(function () { });

Inside this handler I need to do some special operations such as extrapolate NN and SOCIAL for the elements that have a class that finishes with -dashboard-check.

For example if I click on Elem4 nothing should happens. If I click on Elem1 I need to print 17 and facebook, both distinct in two variables.

What the fast way to do this on jquery? regex? .HasClass that endswith?

Do you have control of the HTML? It would be *much* better to embed this information in `data-` attributes instead of classes. — Jon, Sep 25 '13 at 10:05
That's so smart ;) If you put as answer, you will got the accepted answer. — markzzz, Sep 25 '13 at 10:08

score 4 · Accepted Answer · answered Sep 25 '13 at 10:11

Assuming you have control over the HTML, it would be much preferable to use HTML data- attributes to embed this information into:

<div class="button" data-id="17" data-service="facebook">Elem1</div>
<div class="button" data-id="18" data-service="google">Elem2</div>
<div class="button" data-id="19" data-service="twitter">Elem3</div>
<div class="button">Elem4</div>

It's now very easy to write the selector that only works on the elements you want:

$('.button[data-id][data-service]').click(...);

And also very easy to get the information you need on click:

$('.button[data-id][data-service]').click(function() {
    alert($(this).attr("data-id"));           // with jQuery
    alert(this.getAttribute("data-service")); // without jQuery
});

You could also offer the jQuery option of `$(this).data("id")` — Reinstate Monica Cellio, Sep 25 '13 at 10:15
@Archer: True, but that option would also cache the data inside jQuery's private data store, which behaves slightly differently (for one, it's not kept in sync with the DOM). Since there doesn't seem to be a reason to do it I omitted it on purpose. — Jon, Sep 25 '13 at 10:24

score 2 · Answer 2 · answered Sep 25 '13 at 10:05

2

Use ends with selector

    $( "div[class$='-dashboard-check']" ).each(function( index ) {
       console.log( index + ": " + $( this ).attr("id") );
    });

answered Sep 25 '13 at 10:05

Suresh Atta

120,458
37
198
307

But how can I use it inside a `.hasClass`? – markzzz Sep 25 '13 at 10:06
Exactly what i wanted to say... Here is a link to the documentation: http://api.jquery.com/attribute-ends-with-selector/ – Koesper Sep 25 '13 at 10:06
@Koesper :) yes.added the link to api in my post. – Suresh Atta Sep 25 '13 at 10:11

score 0 · Answer 3 · answered Sep 25 '13 at 10:06

0

Try using the endswith attribute selector:

$("[attribute$='value']")

i.e.

$("[class$='-dashboard-check']")

answered Sep 25 '13 at 10:06

Urinprobe

97
1
11

score 0 · Answer 4 · answered Sep 25 '13 at 10:07

you need *=

Description: Selects elements that have the specified attribute with a value containing the a given substring.

try:

$( "div[class*='-dashboard-check']" )

$= check string ends with
*= check string contains

Here is full list of attribute selector

score 0 · Answer 5 · answered Sep 25 '13 at 10:08

0

You can use the [attribute$=value] CSS selector: http://www.w3schools.com/cssref/sel_attr_end.asp. Something like :[class$=endVal].

answered Sep 25 '13 at 10:08

Stefan Dunn

5,363
7
48
84

score 0 · Answer 6 · answered Sep 25 '13 at 10:18

Try

(function () {
    $.fn.hasClassEndsWith = function (suffix) {
        if (this.length === 0) {
            return false;
        }

        var clazz = this.attr('class');
        if (clazz === undefined) {
            return false;
        }

        var classes = clazz.split(' ');
        var regex = new RegExp(suffix + '$', 'i');
        for (var i = 0; i < classes.length; i++) {
            if (regex.test(classes[i])) {
                return true;
            }
        }
        return false;

    };
})(jQuery);

jQuery(function () {
    $('.button').click(function () {
        if ($(this).hasClassEndsWith('dashboard-check')) {
            console.log('dashboard')
        } else {
            console.log('normal')
        }
    });
})

Demo: Fiddle

score 0 · Answer 7 · answered Sep 25 '13 at 10:37

 <div class="button 17-facebook-dashboard-check">Elem1</div>
 <div class="button 18-google-dashboard-check">Elem2</div>
 <div class="button 19-twitter-dashboard-check">Elem3</div>
 <div class="button">Elem4</div>

Try this:

 $( "div[class$='-dashboard-check']" ).click(function (e) {
    var o = $(e.target)
    var str = o.attr('class');
    var s1 = str.substring(7,9);
    var s2 = str.substr(10,str.indexOf('-'));
    alert(s1+" "+s2);
  });

How can I check classes that ends with?

7 Answers7

Linked