Solved

Check class name of current CSS selector

Posted on 2014-11-11
5
135 Views
Last Modified: 2014-11-17
If a user is clicking on a button or link, how do I capture the classname and ID of that link? What if the class name is in a parent element of that link? Example:
<div class="submenu">
	<ul>
		<li><a href="/dir1" id="dir1">Directory 1</a></li>
                <li><a href="/dir2" id="dir2">Directory 2</a></li>
	</ul>
</div>

Open in new window


I want to know that class was submenu and id was dir1 if first item clicked?
0
Comment
Question by:894359
  • 2
  • 2
5 Comments
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40436749
Hello 894359,

We can do it by using jQuery.
See the attached file.
test.html
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40437213
test page : http://jsfiddle.net/8k7yo6u9/1/

jQuery(function($) {
    $("a[id^=dir]").click(function(evt) {
        evt.preventDefault();
        var className = $(this).closest("div").attr("class");
        // checking :
        alert( className );
    });
});

Open in new window

0
 

Author Comment

by:894359
ID: 40438182
IS there a way without jQuery and only javascript?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40438294
here : http://jsfiddle.net/8k7yo6u9/2/

<div id="menu">
    <div class="submenu">
        <ul>
            <li><a href="/dir1" id="dir1">Directory 1</a></li>
            <li><a href="/dir2" id="dir2">Directory 2</a></li>
        </ul>
    </div>
    <div class="submenu2">
        <ul>
            <li><a href="/dir3" id="dir3">Directory 3</a></li>
            <li><a href="/dir4" id="dir4">Directory 4</a></li>
        </ul>
    </div>
</div>
<script>
    var links = document.getElementById("menu").getElementsByTagName("a");
    for(var i=0;i<links.length;i++) {
        links[i].onclick = function() {
            var className = this.parentNode.parentNode.parentNode.getAttribute("class");
            alert( className );
            return false;
        }
    }
</script>

Open in new window

0
 

Author Comment

by:894359
ID: 40439136
leakim, is there a way to bubble up to capture the first class name if you don't know the relationship of the class name?
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now