jQuery - How to combine multiple elements with same class name in one selector?

Question

Sorry about the cranky title, here's the example:

<table>
  <tr>
    <th class="hey-1-aa"></th>
  </tr>
  <tr>
    <th class="hey-2-aa"></th>
  </tr>
  <tr>
    <td class="hey-1-bb"></tr>
  </tr>
  <tr>
    <td class="hey-2-bb"></tr>
  </tr>
</table>

Is there any better way to selects all the THs/TRs start with the class prefix "hey-2-", with something less verbose than $('th[class^="hey-2"], td[class^="hey-2"]')?

Sorry for the seemingly dumb question, I've updated it a bit to mean what I really would like to know, sorry lol — gsklee
– gsklee, Commented Jul 26, 2012 at 3:15
In essence, what I would like to know is that, if there is anything like (td, th)[class^="hey-2"] for selectors...? — gsklee
– gsklee, Commented Jul 26, 2012 at 3:16

nathan gonzalez · Accepted Answer · 2012-07-26 03:27:32Z

2

$('.hey-2')

the selectors for sizzle (the jquery selector engine) begin with basic css and then move from there. so if you can style an element with a selector, you can grab it from jquery the same way.

for a list of selectors take a look at the jquery api

EDIT

so i would think the first thing to eliminate is limiting it to tr/th and just doing something like

$('table [class^=hey-2]')

that simplifies it quite a bit.

i tend to agree with the other answers though. if the items legitimately have something in common, why not give them a common class? instead of class="hey-2-aa" make it class="hey-2 aa" then you really can just use the original answer i posted.

edited Jul 26, 2012 at 3:27

answered Jul 26, 2012 at 3:08

nathan gonzalez

12k4 gold badges43 silver badges57 bronze badges

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

3 Comments

nathan gonzalez Over a year ago

well, to be fair, if you had turned your comment into an answer i wouldn't have had to write this. ;)

gsklee Over a year ago

Sorry for the seemingly dumb question, I've updated it a bit to mean what I really would like to know, sorry lol

nathan gonzalez Over a year ago

@Kay, sorry for the initial wrong answer. reading through the original question more carefully i can see my initial answer did not actually meet your need.

Vitor Braga · Accepted Answer · 2012-07-26 03:11:00Z

1

Remember that you can use more than 1 class for an element. So, maybe it would be useful set more classes to the elements. It will be simpler to select.

answered Jul 26, 2012 at 3:11

Vitor Braga

2,2121 gold badge24 silver badges19 bronze badges

Comments

ZeeCoder · Accepted Answer · 2012-07-26 03:16:18Z

1

<table>
  <tr>
    <th class="hey-1-aa"></th>
  </tr>
  <tr>
    <th class="hey-2-aa sameclass"></th>
  </tr>
  <tr>
    <td class="hey-1-bb"></tr>
  </tr>
  <tr>
    <td class="hey-2-bb sameclass"></tr>
  </tr>
</table>

$(".sameclass");

answered Jul 26, 2012 at 3:16

ZeeCoder

9819 silver badges18 bronze badges

Comments

nnnnnn · Accepted Answer · 2012-07-26 03:38:04Z

0

You could try this:

$('tr > [class^="hey-2"]')

That is, select any children of each tr element that have a class starting with "hey-2".

Demo: http://jsfiddle.net/CCuxX/

(Or for markup exactly like that in the question: $('tr:odd > *'))

I know that obviously you've simplified your markup for the question, but as it stands you seem to be using classes as unique identifiers - if so you should use ids.

answered Jul 26, 2012 at 3:38

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Collectives™ on Stack Overflow

jQuery - How to combine multiple elements with same class name in one selector?

4 Answers 4

EDIT

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

EDIT

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related