CODEWITHSUNDEEP
javascriptjqueryclass
Lukas
Lukas

Reputation: 7734

How to set multiple class numbers in one write in jQuery?

can you tell my how to set multiple class numbers in one write? I have $('.oven_program_01') class, and .click action. This action will be fire after click at elements with clasess from $('.oven_program_01') to $('.oven_program_12'). Can you tell me how to write this without repeat this clasess? Something like that: $('.oven_program_'01-12') Much thx for help.

Upvotes: 1

Views: 212

Answers (5)

Ram
Ram

Reputation: 144679

You can use the Attribute Starts With selector:

[name^="value"]

$('elem[class^="oven_program_"]').click(function(){
  // ...
})

Please note that by using this selector, class attributes must begin with oven_program_ not the other class names.

Or Attribute Contains Selector:

Selects elements that have the specified attribute with a value containing the a given substring. [name*="value"]

$('elem[class*="oven_program_"]').click(function(){
  // ...
})

Upvotes: 1

DaveR
DaveR

Reputation: 2483

Classes are really designed to label "types" of things on your pages. If you are labeling individual elements then you should use the id attribute.

So for your elements I would set an id of "oven_program_01" to "oven_program_12" and a class of "oven_program" for all the elements.

This way you can select a particular element with:

$("#oven_program_01")

and select all of the elements of this type with:

$(".oven_program")

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191729

$('[class^=oven_program_]')

This will select any class that starts with oven_program_.

Need to be more specific? jQuery does not have a built-in regex selector, but someone made this:

http://james.padolsey.com/javascript/regex-selector-for-jquery/

Haven't used it, but seems like you would do

$(':regex(class, oven_program_\d\d?)')

Finally, I'm not 100% sure what you're doing but I wouldn't even use a class. I would do something like <element class="oven_program some other class names" data-oven_program="12">. You can use the same selectors above on data attributes too, if necessary.

Upvotes: 0

Shreedhar
Shreedhar

Reputation: 5640

Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don't know the full extent to which they can use classes. Classes can not only be used more than once, but more than one can be used on an element:

i think its not good idea to have different classes, its better use same classes, different id's.

Upvotes: 1

Cranio
Cranio

Reputation: 9847

$("[class^=oven_program_]").click(....)

Although the best thing would be to use TWO classes for you objects, like

class="oven_program_01 oven_clickable" 

$(".oven_clickable").click()

or better use an ID and a common class.

id="oven_program_01" class="oven_clickable"

That's the purpose of classes and ids, by the way

Upvotes: 0

Related Questions