I have this sort of html:

<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
    <section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
        <div class="contentDiv" id="clearfix">
            <div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
                mycontent
            </div>
            <div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
                <div class="heading-block nobottommargin center">
                    <div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
                        mycontent
                    </div>
                    <div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
                </div>
                <a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
            </div>
        </div>
    </section>
</div>

Now, here I want to capture div class for the div I will click on.

the function I am trying is but it is not working as expected. It keep giving only first div class:

$(document).ready(function () {
    $('.outerDiv').click(function () {
        alert($(this).attr('class'));
    });
});

I have this sort of html:

<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
    <section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
        <div class="contentDiv" id="clearfix">
            <div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
                mycontent
            </div>
            <div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
                <div class="heading-block nobottommargin center">
                    <div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
                        mycontent
                    </div>
                    <div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
                </div>
                <a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
            </div>
        </div>
    </section>
</div>

Now, here I want to capture div class for the div I will click on.

the function I am trying is but it is not working as expected. It keep giving only first div class:

$(document).ready(function () {
    $('.outerDiv').click(function () {
        alert($(this).attr('class'));
    });
});

• javascript
• jquery

• this.classname is a good alternative. – evolutionxbox Commented Sep 3, 2015 at 9:23
• If I uses this, it says undefined. Tried number of things so far. – user5084534 Commented Sep 3, 2015 at 9:24
• 1 because it has to be .className – Andreas Commented Sep 3, 2015 at 9:26
• tried this too. No luck. @Andreas – user5084534 Commented Sep 3, 2015 at 9:27
• What is happening?? are you not getting the classes in alert? can you please give an example of output u wamt? – Tushar Gupta Commented Sep 3, 2015 at 9:27

8 Answers 8

The following can get the class name of the exact element on which the click happened.

$(document).ready(function () {
    $('.outerDiv').click(function (e) {
        alert(e.target.className);
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
    <section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
        <div class="contentDiv" id="clearfix">
            <div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
                mycontent
            </div>
            <div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
                <div class="heading-block nobottommargin center">
                    <div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
                        mycontent
                    </div>
                    <div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
                </div>
                <a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
            </div>
        </div>
    </section>
</div>

The problem is about the selector. And opening the selector you have to stop the propagation to not have all parents firing the same event.

Try this:

<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
    <section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
        <div class="contentDiv" id="clearfix">
            <div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
                mycontent
            </div>
            <div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
                <div class="heading-block nobottommargin center">
                    <div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
                        mycontent
                    </div>
                    <div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
                </div>
                <a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">
$(document).ready(function () {
    $('.outerDiv, .outerDiv div').click(function (e) {
        alert($(this).attr('class'));
        e.stopPropagation();
    });
});
</script>

$(document).ready(function () {
    $('.outerDiv ').click(function (e) {
        console.log(e.target.className);
    });
});

Would work like a charm, plus its better that you use console.log rather than alert to view things

Try this:

$(document).ready(function () {
    $('.outerDiv').click(function () {    
      var className = $(this).attr('class');
      alert(className);
    });
});

It will alert the class of the div on which the event has been attached to. You will need to bind the events for all the divs you need the class for. And in case you need the class for the parent div, just refer it within the bound function.

If you're looking for a specific class present or not then you can use ".hasClass('className')"

If you want all the classes on the div

$(document).ready(function () {
    $('.outerDiv').click(function () {    
      var className = this.className;
      alert(className);
    });
});

This is a native JS method, not jquery.

If you want that, on clicking of any div from your page will alert class name for that div, than you Need to bind .click() event on all of div present in your page. Also prevent your click event to propagate to parent div, so that it will show only current div click class name.

Try this code :

$(document).ready(function () {
   $('div').on('click', function(e) {
       alert($(this).attr('class'));
       e.stopPropagation();
   });
});  

Here is Jsfiddle Demo

jQuery(document).ready(function () {
   $('div').on('click', function(e) {
       console.log(e.target.className);
       e.stopPropagation();
   });
});