21

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?

4 Answers 4

42

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.

10
  • This will try to find elements with the given selector below the current element in the DOM tree, not including the current element. But the OP wanted to check the current element for a given class
    – devnull69
    Apr 23, 2013 at 9:06
  • Thanks for the tip! Yep, I did want it to check the current element for a given class.
    – Truvia
    Apr 23, 2013 at 12:13
  • Added a full working example after reading your question again ;).
    – soyuka
    Apr 23, 2013 at 12:16
  • 1
    my bad! hadn't deleted original $('#box').click(function(){ });
    – Truvia
    Apr 23, 2013 at 13:01
  • 1
    checking existence of a class that STARTS with a "word" should be tested using: $el.is('[class^="word"], [class*=" word"]') as you might have a class named "any-word" and will test positively as it contains the keyword, but it's not starting with ...
    – qdev
    Jun 29, 2016 at 21:36
5

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

4
  • What did you meen by This will only work consistently if the element has exactly one class. I did a little test here, but can't understand.
    – soyuka
    Apr 23, 2013 at 10:00
  • If you have more than one class, the mentioned selector for .is() will work if and only if the very first class name in the list starts with answerbox. If the class name you are looking for is not the first one, the selector won't work as expected
    – devnull69
    Apr 23, 2013 at 11:02
  • Ok now I understand it, but it seems to work with the *= selector.
    – soyuka
    Apr 23, 2013 at 11:58
  • I think I'll need multiple classes, but in theory would this work if I changed its idea with instead of the class?
    – Truvia
    Apr 23, 2013 at 12:11
3

The other answers do not work if your element has multiple classes on the same element. You need to select it as such:

if ( $(this).is('[class^="bleh_"], [class*=" bleh_"]') ) {

    // Return true if element has class that starts with "bleh_"

    // Note: The second argument has a space before 'bleh_'

}
1
  • 1
    Thanks for this, best answer for selection.
    – beatcoder
    Mar 3, 2020 at 9:30
2

If you need something that works for multiple class names, check this

var theClasses = $(this).attr('class').split(" ");
var i=0;
var found = false;
while(i<theClasses.length && !found) {
   if(theClasses[i].indexOf('answerbox') == 0) {   // starts with answerbox
      found = true;
   }
   i++;
}
if(!found) {
   // the current element does not have a class starting with answerbox
}
1
  • Thanks for this, I'll have a look to see if I can get it to work!
    – Truvia
    Apr 23, 2013 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.