Jquery If element has class which begins with x, then don't addClass

Question

I'm a definite newbie, so apologies for rubbish coding! I've written the following Jquery for a practice project I set myself:

When you click on the div, it has the class "in_answerbox1" added and a cloned div is created in the answerbox with the class "answerbox_letter1" added.

Eventually there will be many divs in a grid (or cells in a table) that when you click on a particular one, it will fade out and seem to appear in the answerbox. Then when you click on the thing in the answerbox,the relevant div in the grid will reappear and the clone will be removed from the answerbox.

However, I now want the class to be added ONLY if the thing I'm clicking on is not already in the answerbox: i.e. if either the original or the clone has a class which contains "answerbox".

I wrote the following knowing it wouldn't work but that it might explain what I want better.

var n = 0;

$('#box').click(function(){

    if(!$(this).hasClass('*[class^="answerbox"]')) {

    $(this).addClass('in_answerbox' + (n+ 1) );

    $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + (n + 1));
    n = (n + 1);

}


});

Any suggestions?

Answer 1

I think the matter is in the if condition :

if(!$(this).hasClass('[class^="answerbox"]')) {

Try this :

if(!$(this).is('[class*="answerbox"]')) {
    //Finds element with no answerbox class
} else {
    //The element has already an answerbox class
}

You should take a look at toggleClass and is jquery docs.

See this live fiddle example.

Little tip : instead of n = (n + 1) you can do n++ :).

Edit :

After reading again the question, I did a full working script :

Assuming the Html is :

<div id="box">
    <p>Answer1</p>
    <p>Answer2</p>
    <p>Answer3</p>
</div>

<div id="answerbox">

</div>

jQuery :

var n = 0;

$('#box p').on('click',function(e) {
    e.preventDefault();
    if(!$(this).is('[class*="answerbox"]')) {
        n++;
        $(this).addClass('in_answerbox' + n );
        $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + n); 
    }
});

See this example here.

You should consider using data-attributes, they'll be more reliable then classes for what you're trying to do.

---

Note that if you want the selector to match only if the class attribute begins with a word, you'll want [class^="word"]. * however searches through the whole class attribute. Be careful though, [class^="word"] will not match <div class="test word"> see here.

Answer 2

Use .is() instead of .hasClass(). The former can be used with CSS selectors whereas the latter can only use class name as a "fixed" string.

if(!$(this).is('[class^="answerbox"]'))

NOTE: This will only work consistently if the element has exactly one class