How to call jQuery (this) from onclick function tag binding

Question

I have

<ul> <li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Test</a></li> <li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Test fdgfdgfdgfdgfdgfdgfdgfdg fdg</a></li> <li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Plan</a></li> <li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">Test</a></li> </ul> 

and wants to add the class name to the parrent tag li ie class="selected" bu sing jquery tag. I used this jquery code

 function setSelectedTestPlan() { jQuery("#tree ul li").each(function () { jQuery(this).removeClass("selected"); }); jQuery(this).closest('li').addClass("selected"); } 

But this line is jQuery(this).closest('li').addClass("selected"); does not work...

Please help me...

Answer 1

HTML

 <li><a onclick="setSelectedTestPlan(this);" href="javascript:void(0);">New Test</a></li> 

Js

 function setSelectedTestPlan(el) { jQuery("#tree ul li").removeClass("selected"); jQuery(el).closest('li').addClass("selected"); } 

or

Js

 function setSelectedTestPlan(el) { jQuery(el).closest('li').addClass("selected").siblings().removeClass("selected"); } 

Answer 2

You need to send the item through a function like this

HTML

 onclick="setSelectedTestPlan(this);" 

Js

 function setSelectedTestPlan(ele) { jQuery("#tree ul li").each(function () { jQuery(this).removeClass("selected"); }); jQuery(ele).closest('li').addClass("selected"); } 

Answer 3

One line:

 jQuery(this).closest('li').addClass("selected").siblings().removeClass("selected"); 

but you will need to change your event to go through 'this';

 onclick="setSelectedTestPlan(this);" 

Answer 4

 function setSelectedTestPlan(e) { jQuery("#tree ul li").each(function () { jQuery(this).removeClass("selected"); }); jQuery(e).closest('li').addClass("selected"); } <li><a onclick="setSelectedTestPlan(this);" href="javascript:void(0);">New Test</a></li> 

alternative

  <ul> <li><a class="mylink" href="javascript:void(0);">New Test</a></li> <li><a class="mylink" href="javascript:void(0);">New Test fdgfdgfdgfdgfdgfdgfdgfdg fdg</a></li> <li><a class="mylink" href="javascript:void(0);">New Plan</a></li> <li><a class="mylink" href="javascript:void(0);">Test</a></li> </ul $(function(){ $(".mylink").click(function(e){ $(".mylink").parents("li").removeClass("selected"); $(this).parents("li").addClass("selected"); e.preventDefault(); }); }); 

Answer 5

HTML

 <li><a onclick="setSelectedTestPlan.call(this, event);" href="javascript:void(0);">New Test</a></li> 

Js

 function setSelectedTestPlan(e) { jQuery(this)closest('li').addClass("selected").siblings().removeClass("selected"); }