Событие jQuery onclick для тегов <li>

У меня есть следующие пункты меню, созданные генератором шаблонов, 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>

Я хочу записать событие onclick для <li> с помощью одной функции jQuery: Я пробовал это, что неполно:

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

Я могу дойти до того, что это HTMLliElement, но не могу понять, как получить текст меню или идентификатор для него?

Как обычно клики меню захватываются с помощью jQuery?

Ответы

Ответ 1

Здесь, чтобы получить текст меню, вызвавшего событие (похоже, у него нет идентификатора):

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

Ответ 2

В вашем вопросе кажется, что у вас есть селектор span, заданный каждому span отдельному классу в опции ul li, а затем у вас много ответов, т.е.

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

Но вам не нужно использовать ul.art-vmenu li, а вы можете использовать прямой ul с помощью on, как показано ниже:

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

Ответ 3

Я не уверен, в чем ваш вопрос, но чтобы получить текст элемента li, который вы можете использовать:

$(this).text();

И чтобы получить id элемента, вы можете использовать .attr('id');. Если у вас есть ссылка на нужный элемент (например, $(this)), вы можете выполнить любую функцию jQuery на нем.

Ответ 4

Вы можете получить идентификатор или любой другой атрибут, используя функцию атрибута jQuery.

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

Чтобы получить текст меню, который находится в диапазоне t, вы можете сделать это:

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

Изменить HTML так же просто:

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

Конечно, если бы вы хотели получить все span.t в первую очередь, это было бы проще сделать:

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

Но я предполагаю, что у вас уже есть li, и вы хотите использовать child(), чтобы найти что-то внутри этого элемента.

Ответ 5

Ввод в $(this) вернет элемент jQuery вместо HTML-элемента. Тогда это зависит от того, что вы хотите сделать в событии click.

alert($(this));

Ответ 6

this - элемент HTML.
$(this) - объект jQuery, который инкапсулирует элемент HTML.

Используйте $(this).text() для извлечения внутреннего текста элемента.

Я предлагаю вам обратиться к jQuery API документации для получения дополнительной информации.

Ответ 7

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

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

Документация jquery по live(): http://api.jquery.com/live/

Описание: Прикрепите обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.