CODEWITHSUNDEEP
jqueryjquery-selectors
markzzz
markzzz

Reputation: 47945

How can I check classes that ends with?

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?

Upvotes: 1

Views: 437

Answers (7)

Jyoti Prakash
Jyoti Prakash

Reputation: 1260

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 0

Jon
Jon

Reputation: 437336

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

Upvotes: 4

Stefan Dunn
Stefan Dunn

Reputation: 5513

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

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

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

Upvotes: 0

Urinprobe
Urinprobe

Reputation: 97

Try using the endswith attribute selector:

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

i.e.

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

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

Use ends with selector 

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

Upvotes: 2

Related Questions