JQuery class selector starting with?

Question

I have the following 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 classes bubble bubble_whiteand bubble bubble_black. I thought about the code under it, but it did not work:

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

Any ideas on how to do this?

Answer 1

Try the following:

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

Answer 2

The selector [attr^=val]compares the entire attribute value. Therefore, your attribute value must begin with bubble_. For a list separated by spaces, you can use the selector [attr|=val]:

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

Or you do the filtering yourself:

$(".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);
})