Click here to Skip to main content
15,917,005 members
Please Sign up or sign in to vote.
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
Updated 24-Sep-11 23:55pm
v2

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

 
});
 
Share this answer
 
v2
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.
 
Share this answer
 
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,
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900