find the name of the class

Question

0.00/5 (No votes)

See more:

hi!

I want to find the name of the class which is clicked like I have this html code

<div class="categorylist level0"></div>level0
<div class="categorylist level1"></div>level1
<div class="categorylist level2"></div>level2
<div class="categorylist level3"></div>level3
<div class="categorylist level4"></div>level4


<div class="categorylist level0"></div>level0
<div class="categorylist level1"></div>level1

<div class="categorylist level0"></div>level0
<div class="categorylist level1"></div>level1
<div class="categorylist level2"></div>level2
<div class="categorylist level3"></div>level3

Now when I click on div of category list level0 then div of category list level1 should be shown and when category list level1 is clicked then category list level2 should be shown and so on.
There can be many levels. I want to do it dynamically.

Please tell me how I would know which category list is clicked.
I am doing it like this in jQuery.

JavaScript

$(document).ready(function()
{
$(".categorylist.level0").siblings().css({"background-color":"red"});
$categories = $(".categorylist");

for($x=1; $x<=$categories.length; $x++)
{
$(".categorylist.level"+$x).css("display", "none");
}

$(".categorylist").click(function()//i want to write the one  click function for every categorylist level i-e 1,2,3,4
{
       //here i want to know categorylist level no
            $category = $(this).parents(".categorylist");//this is not working
            $self = $category.split(" ")[1];
	    $level = parseInt($self.split("")[5]);
	    $next = $level+1;
$(this).css({"background-color":"yellow"}).next().slideToggle(700).siblings("div.categorylist.level"+$next).css

({"background-color":"red"}).slideUp("slow");
 $(this).siblings().css({"background-color":"red"});
for($x=$next+1; $x<=$categories.length; $x++)
{
$(this).siblings("div.categorylist.level"+$x).slideUp("slow");
//$(this).siblings("div.categorylist.level"+$x).css({"background-color":"red"});

}
       
return false;
});

Posted 24-Sep-11 23:50pm

hinzhonee

Updated 24-Sep-11 23:55pm

André Kraak

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

omid.nazifi · Answer 1 · 2011-09-25T01:22:00

if you means that you have many hidden div tag and only first div is visible,
you can use a general variable (for example $status=0)that shown level0 position.
so when click on first level offer to

JavaScript

$(".categorylist").click(function(){}

in function start be check every div tags with "categorylist" class and ...

my friend see below code:

JavaScript

$status=0;
$(document).ready(function()
{
      // disible all levels
      for($x=1; $x<=$categories.length; $x++){
            $(".categorylist.level"+$x).css("display", "none");
      }
 
      // trigle level
      $(".categorylist").click(function(){
            for($x=0; $x<=$categories.length; $x++)
            {
                  if($status==$x){
                        $(".categorylist.level"+$x).css("display", "none");
                        $(".categorylist.level"+$x+1).css("display", "block");
                  }
            }  
      });

 
});

Rupesh Kumar Tiwari · Answer 2 · 2011-09-26T07:36:00

You should put some text inside the each div elementso that you can click on div elements. Then onclick of div element you can write jquery to get the class name. See my below jquery code that will give you the class name of the clicked div element.

HTML

<div class="categorylist level0">level0
</div>
<div class="categorylist level1">level1
</div>
<div class="categorylist level2">level2
</div>
<div class="categorylist level3">level3</div>
<div class="categorylist level4">level4
</div>

Write below code.

JavaScript

$(function(){
        $(".categorylist").click(function (event){
        var className= $(event.target).attr("class")
        alert(className);
        });
    });

so on click of div element it will get the class name.
Let me know if I understood your question correctly or not.

hinzhonee · Answer 3 · 2011-09-27T21:42:00

Solution 4

yes you understood the question correctly..this is what i needed.
this is how i achieved the solution..

C#

$(function(){
        $(".categorylist").click(function (event){
        var className= $(this).attr("class")
        alert(className);
        });
    });

thanks alot,

Posted 27-Sep-11 21:42pm

hinzhonee

Comments

André Kraak 28-Sep-11 3:50am

If you have a question about or comment on the given solution use the "Have a Question or Comment?" option beneath the solution. When using this option the person who gave the solution gets an e-mail message and knows you placed a comment and can respond if he/she wants.

Please move the content of this solution to the solution you are commenting on and remove the solution. Thank you.

find the name of the class

3 solutions

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0