JQuery classname selector starting with?

Question

I have the folowing html markup:

<DIV class="bubble bubble_white">
  <DIV class=bubble_large></DIV>
</DIV>
<DIV class="bubble bubble_black">
  <DIV class=bubble_large></DIV>
</DIV>

I want to select the classes bubble bubble_white and bubble bubble_black. I was thinking about the code underneath but it didn't work:

$(".bubble.[class^=bubble_]")

Any ideas on how to do it?

Answer 1

The [attr^=val] selector is comparing the whole attribute value. So your attribute value must begin with bubble_ to be selected. For a whitespace-separated list, you could use the [attr|=val] selector:

$(".bubble[class|=bubble_white], .bubble[class|=bubble_black]")

Or you do the filtering on your own:

$(".bubble").filter("[class|=bubble_white], [class|=bubble_black]")

Or:

$(".bubble").filter(function() {
    var $this = $(this);
    return $this.hasClass("bubble_white") || $this.hasClass("bubble_black");
})

Or:

$(".bubble").filter(function() {
    return /(?:^|\s+)bubble_/.test(this.className);
})

Answer 2

Try this:

$(".bubble[class*=bubble_]")