how to get the class name of divs?

Question

<body>
    <a id="append">Add DIV</a> 
    <div id="parent"></div>
    <script>
        $(document).ready(function() {
          var count = 0;
          $('#append').click(function() {
            $('#parent').append('<div
                class="article' + count + '">im div</div>');
            count++;
          });
          $('div').click(function() {
            alert(this.class);
          });
        });
    </script>
</body>

when i am trying to display class name of divs in alert it shows undefind.

use event delegation like `$(document).on('click','div',function(){` instead — vijayP, Sep 19 '16 at 06:53

score 1 · Answer 1 · answered Sep 19 '16 at 06:51

1

There is an attr property:

$(this).attr('class');

answered Sep 19 '16 at 06:51

mtch9

298
2
11

score 1 · Answer 2 · answered Sep 19 '16 at 06:52

This is Example Of Your Question

$(document).ready(function(){
alert($('#ss').attr('class'));
});

.ssclass{
width:100%;
  height:100vh;
  background:#ff8800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ss" class="ssclass"></div>

score 1 · Answer 3 · answered Sep 19 '16 at 06:54

Try this...

$(document).ready(function() {
  var count = 0;
  $('#append').click(function() {
    $('#parent').append('<div class="article' + count + '">im div</div>');
    count++;
  });
  $('div').click(function() {
    alert($(this).attr('class'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<body>
  <a id="append">Add DIV</a> 
  <div class='className' id="parent"></div>
</body>

Sudharsan S · Answer 4 · 2016-09-19T07:00:01.817

1

Use event delegation for dynamically created elements. Otherwise your class not triggered on click.

$('#parent').on('click', 'div', function() {
  var getclass = $(this).attr('class');
  console.log(getclass);
});

edited Sep 19 '16 at 07:00

answered Sep 19 '16 at 06:54

Sudharsan S

15,336
3
31
49

score 1 · Answer 5 · answered Sep 19 '16 at 06:54

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call. As you are generating elements dynamically, You need to use Event Delegation using .on() delegated-events approach.

General Syntax

$(document).on('event','selector',callback_function)

Additionally, You need to read className property or use getAttribute()

$(document).ready(function() {
  var count = 0;
  $('#append').click(function() {
    $('#parent').append('<div class="article' + count + '" > im div </div>');
    count++;
  });
  $('#parent').on('click', "div", function() {
    alert(this.className)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a> 
<div id="parent"></div>

score 1 · Answer 6 · answered Sep 19 '16 at 06:56

this is how you can get the all the class name of div's. refer the working demo.

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
</head>

<style type="text/css">




</style>


<body>

<div class="main">
 <div class="classone">my name is class one</div>
 <div class="classtwo">my name is class two</div>
 <div class="classthree">my name is class three</div>
</div>

<script type="text/javascript">

$(document).ready(function(){
 
 var thelength = $("div.main div").length;//get how many divs
 for(var i=0;i<thelength;i++)
 {
  var theclass_name = $("div.main div").eq(i).attr('class');//get the class name of each.
  alert(theclass_name);
 }
});

</script>




</body>


</html>

Komal · Answer 7 · 2016-09-19T07:03:52.187

0

Use it

 <body> 
  <a id="append">Add DIV</a> 
  <div id="parent"></div>
  <script>
    $(document).ready(function() { 
      var count = 0; 
      $('#append').click(function(){    
        $('#parent').append('<div class="article'+count+'">im div</div>'); count++; 
      }); 
      $('#parent div').click(function(){
        alert($(this).attr('class'));  
      }); 
    }); 
  </script>
</body>

edited Sep 19 '16 at 07:03

answered Sep 19 '16 at 06:57

Komal

2,716
3
24
32

score 0 · Accepted Answer · answered Sep 19 '16 at 07:00

0

Use Event delegation heres the Fiddle

$('#parent').on('click','div',function() {
className = $(this).attr('class');
    alert(className);
});

answered Sep 19 '16 at 07:00

Vivekraj K R

2,418
2
19
38

how to get the class name of divs?

8 Answers8