CODEWITHSUNDEEP
jquery
afshin
afshin

Reputation: 1833

jQuery onclick event for <li> tags

I have the following menu items generated by a template generator, artisteer:

<ul class="art-vmenu">

<li><a href="#" ><span class="l"></span><span class="r"></span>
        <span class="t">Home</span></a></li>    
<li><a href="#" ><span class="l"></span><span class="r"></span>
        <span class="t">Create User</span></a></li> 
<li><a href="#" class="active"><span class="l"></span><span class="r"></span>
        <span class="t">List Users</span></a></li>  
<li><a href="#"><span class="l"></span><span class="r"></span>
        <span class="t">Admin</span></a></li>   
</ul>

I want to capture the onclick event for <li> with a single jQuery function: I've tried this which is incomplete:

$(document).ready(function() 
{
   $('ul.art-vmenu li').click(function(e) 
   { 
    alert(this);
   });
});

I can go as far as seeing this is a HTMLliElement but cannot figure how to get the menu text or id for it?

How is menu click usually captured with jQuery?

Upvotes: 27

Views: 188217

Answers (7)

Manoj Saini
Manoj Saini

Reputation: 339

In your question it seems that you have span selector with given to every span a seperate class into ul li option and then you have many answers, i.e.

$(document).ready(function()
 {
   $('ul.art-vmenu li').click(function(e) 
    { 
     alert($(this).find("span.t").text());
   });
});

But you need not to use ul.art-vmenu li rather you can use direct ul with the use of on as used in below example :

$(document).ready(function()
 {
  $("ul.art-vmenu").on("click","li", function(){
     alert($(this).find("span.t").text());
  });
});

Upvotes: 8

jk.
jk.

Reputation: 14435

$(document).ready(function() {
    $('ul.art-vmenu li').live("click", function() {
        alert($(this).text());
    });
});

jsfiddle: http://jsfiddle.net/ZpYSC/

jquery documentation on live(): http://api.jquery.com/live/

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

Upvotes: 0

Lexx Koto
Lexx Koto

Reputation: 123

You can get the ID, or any other attribute, using jQuery's attrib function.

$('ul.art-vmenu li').attrib('id');

To get the menu text, which is in the t span, you can do this:

$('ul.art-vmenu li').children('span.t').html();

To change the HTML is just as easy:

$('ul.art-vmenu li').children('span.t').html("I'm different");

Of course, if you wanted to get all the span.t's in the first place, it would be simpler to do:

$('ul.art-vemnu li span.t').html();

But I'm assuming you've already got the li's, and want to use child() to find something within that element.

Upvotes: 2

Locksfree
Locksfree

Reputation: 2702

Here, to get the text of the menu that triggered the event (does not seem to have any id):

 $(document).ready(function() 
 {
    $('ul.art-vmenu li').click(function(e) 
    { 
     alert($(this).find("span.t").text());
    });
 });

Upvotes: 41

Bertrand Marron
Bertrand Marron

Reputation: 22210

this is a HTML element.
$(this) is a jQuery object that encapsulates the HTML element.

Use $(this).text() to retrieve the element's inner text.

I suggest you refer to the jQuery API documentation for further information.

Upvotes: 0

James Allardice
James Allardice

Reputation: 165951

I'm not really sure what your question is, but to get the text of the li element you can use:

$(this).text();

And to get the id of an element you can use .attr('id');. Once you have a reference to the element you want (e.g. $(this)) you can perform any jQuery function on it.

Upvotes: 2

CraigW
CraigW

Reputation: 715

Typing in $(this) will return the jQuery element instead of the HTML Element. Then it just depends on what you want to do in the click event.

alert($(this));

Upvotes: 0

Related Questions