How to get class of div using jquery onclick

Question

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'));
    });
});

If I uses this, it says undefined. Tried number of things so far. — user5084534
– user5084534, Commented Sep 3, 2015 at 9:24
What is happening?? are you not getting the classes in alert? can you please give an example of output u wamt? — Tushar Gupta
– Tushar Gupta, Commented Sep 3, 2015 at 9:27

rrk · Accepted Answer · 2015-09-03 09:29:56Z

6

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.com/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>

answered Sep 3, 2015 at 9:29

rrk

15.9k4 gold badges32 silver badges49 bronze badges

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

3 Comments

user5084534 Over a year ago

Strangely your code returns me empty alert. I am surprised well.

rrk Over a year ago

@LearningROR empty alerts are coming when the click target is an element which doesn't have a class name.

user5084534 Over a year ago

why $('.outerDiv, .outerDiv div').click(function (e) { works well with accepted answer but not with yours? what does this mean? can you explain.

Javier Suero Santos · Accepted Answer · 2015-09-03 09:33:48Z

2

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>

answered Sep 3, 2015 at 9:33

Javier Suero Santos

5827 silver badges22 bronze badges

2 Comments

user5084534 Over a year ago

What is the meaning of: $('.outerDiv, .outerDiv div').click(function (e) { ? I want to know about outerDiv, .outerDiv div

user5084534 Over a year ago

Please explain your JS code also. That will help me understand the problem and knowledge. thanks.

Sahal Tariq · Accepted Answer · 2015-09-03 09:48:13Z

2

$(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

answered Sep 3, 2015 at 9:48

Sahal Tariq

2191 silver badge3 bronze badges

Comments

Sakshi Jain · Accepted Answer · 2015-09-03 09:29:22Z

0

Try this:

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

answered Sep 3, 2015 at 9:29

Sakshi Jain

4205 silver badges22 bronze badges

Comments

Asad Palekar · Accepted Answer · 2015-09-03 09:31:26Z

0

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.

answered Sep 3, 2015 at 9:31

Asad Palekar

3012 silver badges12 bronze badges

Comments

Vinayak Phal · Accepted Answer · 2015-09-03 09:32:54Z

0

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.

answered Sep 3, 2015 at 9:32

Vinayak Phal

8,9194 gold badges35 silver badges53 bronze badges

Comments

Yagnesh Agola · Accepted Answer · 2015-09-03 09:46:13Z

0

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

edited Sep 3, 2015 at 9:46

answered Sep 3, 2015 at 9:37

Yagnesh Agola

4,6656 gold badges39 silver badges50 bronze badges

3 Comments

user5084534 Over a year ago

Its not working for section tag. sorry. its not returning its content as it has background image in it.

user5084534 Over a year ago

So its fulfilling my requirement sorry.

Yagnesh Agola Over a year ago

It will return the class name of your div. even though it is inside section tag..

Rajen Ranjith · Accepted Answer · 2015-09-03 09:48:20Z

0

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

answered Sep 3, 2015 at 9:48

Rajen Ranjith

775 bronze badges

1 Comment

user5084534 Over a year ago

Its not working for section tag. sorry. its not returning its content as it has background.

Collectives™ on Stack Overflow

How to get class of div using jquery onclick

8 Answers 8

3 Comments

2 Comments

Comments

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

2 Comments

Comments

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related