Selecting all elements that have same classes and different numbers at once

Question

I am trying to select all of the elements, but even numbers to be styled as one class and odd numbers as a different class, with just one row in CSS, but I don't seem to succeed, for example I have

span#__button1-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button3-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable


span#__button2-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button4-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

Is there any way to select them all, but odd and even numbers to be separated, because I need odd numbers to be red and even to be blue, kind of like this

span#__button(n)-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

span#__button(n+1)-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

I have other elements that have some of these classes, but not just them, so I don't want to target all of them. Other elements are like this

span#__button1-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnIconFirst.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button2-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnIconFirst.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button3-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnIconFirst.sapMBtnInner.sapMBtnText.sapMFocusable

Possible duplicate of [Wildcards in jQuery selectors](http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors) — StudioTime, Mar 13 '17 at 15:34
Could you not just use a class name which is common to all the items? eg. `.sapMBtnDefault{ }` — Jackson, Mar 13 '17 at 15:36
try the same selection but without the id part eg `span.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable` — Cr1xus, Mar 13 '17 at 15:40

score 1 · Answer 1 · answered Mar 14 '17 at 03:01

You have already received many comments and an answer on the question you have asked, so I am only suggesting few alternatives here.

Premise: You are attempting to select multiple elements from a view after the view has been rendered. Assuming that this is in order to change CSS rules or maybe the visibility or the selected controls.

An Alternative: Add some custom data to each control that you want to (later on) select. This can itself be done in two ways. One is to use a factory function to generate the controls. Two is to manually add the custom data to the controls. Factory functions will work when the model data is used as a base for generating the controls. Manual addition of custom data is an option when there are a manageable number of controls being manually created on the view. Once the view is rendered you can always select the elements by looping through the content and checking the custom data.

Pros: The approach will add the custom data based on conditions that you already have in your code. This will make it more maintainable. You do not have to use jQuery and your search will be in JavaScript. You can further tweak the code to allow it to manage multiple sets of custom data (in case that is required in the future) Cons: You will be looping through the content of the view so larger views will cause a performance hit. In case of very complex or voluminous control sets on your views, I would suggest using the attribute selectors from jQuery as mentioned in the other comments and answers.

Hope that helps you.

score 0 · Accepted Answer · answered Mar 13 '17 at 15:42

I would use:

span.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable[id^=__button][id$=-inner]

This selector emulates a wildcard by searchign for __button at the beginning via the attribute selector id^=__button. Then, is searches the end with a id$= .

OR

If the id matching isn't important, simply remove that part:

span.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

Selecting all elements that have same classes and different numbers at once

2 Answers2