javascript retrieve class names from multiple elements

Question

I have this in my page:

 <div id="container">

        <div>
            <p>...</p>
            <a href="#" class></a>
        </div>  

        <div>
            <p>...</p>
            <a href="#" class="checked"></a>
        </div>  

        <div>
            <p>...</p>
            <a href="#" class></a>
        </div>  

</div>

Now, I want some codes to execute when each of the a elements changes its class. This doesn't work:

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

    if ($('#food_container a').attr('class') == "checked") {
        /* some codes */
    }

});

How to fix this? Thanks!

Do you mean that you want to check when any element has the class, or when all of them do? — Pointy
– Pointy, Commented Sep 28, 2013 at 16:36
Use .hasClass('checked') to check if the element has the class. — Joe
– Joe, Commented Sep 28, 2013 at 16:37

Gurminder Singh · Accepted Answer · 2013-09-28 16:46:31Z

2

You are using wrong id in the selector. Change

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

   if ($('#food_container a').attr('class') == "checked") {
    /* some codes */
   }

});

to

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

   if ($('#container a').hasClass('checked')) {
    /* some codes */
   }

});

edited Sep 28, 2013 at 16:46

answered Sep 28, 2013 at 16:38

Gurminder Singh

1,75516 silver badges19 bronze badges

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

1 Comment

Pointy Over a year ago

What if the element has two classes? Checking the "class" attribute directly is usually not a good idea.

Pointy · Accepted Answer · 2013-09-28 16:38:34Z

1

You can use .hasClass() to see if any of the elements have the class:

if ($('#container a').hasClass('checked')) {
  // ...

To see if all of them have the class:

if ($('#container a').length =  $('#container a.checked').length) {
  // ...

answered Sep 28, 2013 at 16:38

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Manish Goyal · Accepted Answer · 2013-09-28 16:42:48Z

0

var links = $("#container").children("a");
$(links).each(function(i,v){
  if($(this).hasClass("checked")){

  }
});

answered Sep 28, 2013 at 16:42

Manish Goyal

7002 gold badges7 silver badges18 bronze badges

Collectives™ on Stack Overflow

javascript retrieve class names from multiple elements

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related