Solved

Check class name of current CSS selector

Posted on 2014-11-11
5
204 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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

810 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