How to find match selectors class and data attribute using jquery

Question

Is there way to get true when match both selectors class and data attribute ?

Find matched dropdown e.g:

`<select class="type-featured" data-featured="normal">`
....
`<select class="type-featured" data-featured="classical">`
....
`<select class="type-featured" data-featured="modern">`

Find select, class equal to type-featured AND data-featured value equal to normal - here is code:

$('.style-wrapper').each( function() {
    var $styles = $(this);
    if ( $styles.parents().find('select').is('.type-featured, [data-featured=normal]') ) {
    // do something here
    }
});

I got TRUE whether select has type-featured class OR data-featured="normal", data-featured="classical", data-featured="modern"

Its seems to be TRUE if match any one selector.

Is possible to get my desired result using .is function? May be using anonymous function like :

.is( function() {
//here some logic to result
});

Rounin · Accepted Answer · 2017-01-24 14:55:07Z

7

If you deploy the jQuery:

$('select.type-featured[data-featured="normal"]').each(function(){

    // [... DO SOMETHING...]

});

you will run the function on only those <select> elements which have:

class="type-featured"
data-featured="normal"

edited Jan 24, 2017 at 14:55

answered Jan 24, 2017 at 14:49

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nand Lal Over a year ago

I write this example code. My original code is big and difficult to explain. May I not explain well. Okay, if we have select, input and textarea then how to match?

Rounin Over a year ago

Using a comma, you can specify any number of selectors to combine into a single result. See: api.jquery.com/multiple-selector eg.

$('select.type-featured[data-featured="normal"], input.type-featured[data-featured="normal"], textarea.type-featured[data-featured="normal"]')

Bud Damyanov · Accepted Answer · 2017-01-24 13:08:48Z

0

Instead of is(...) try with hasClass() - this determine whether any of the matched elements are assigned the given class.

answered Jan 24, 2017 at 13:08

Bud Damyanov

32.1k7 gold badges47 silver badges53 bronze badges

1 Comment

Nand Lal Over a year ago

The .hasClass() method will return true if the class is assigned to an element. Here is class and data attribue

Collectives™ on Stack Overflow

How to find match selectors class and data attribute using jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related