9

Preciso selecionar a ul pai do elemento li que esta sendo clicado. Porém como uma li fica dentro da outra o javascript entende que estou clicando na li e em todas as li pais.

<ul class="lista">
    <li class="item">
        Pai
        <ul class="lista">
            <li class="item">
                Filho
                <ul class="lista">
                    <li class="item">Neto 1</li>
                    <li class="item">Neto 2</li>
                </ul>
            </li>
        <ul>
    </li>
</ul>

Já tentei de milhares de formas fazer a seleção da ul, mas acabei apagando o código e fiquei apenas com um pequeno codigo de "debug":

$(document).ready(function () {
    $(document).on('click','.item:last-child', function () {
         alert($(this).parent().length);
    });
});

Só quando fiz esse código que consegui visualizar q o js entende que cliquei em toda hierarquia das li e não somente na clicada, mesmo com o this.

2 Respostas 2

12

O que está acontecendo é que o evento (no caso, o clique) continua a se propagar através dos elementos "pais" do li clicado. Para impedir que o evento se propague, você deve utilizar a função:

event.stopPropagation();

Seu código deverá ficar parecido com:

$(document).ready(function () {
    $(document).on('click','.item', function (event) {
       event.stopPropagation(); 
       alert($(this).parent().length);
    });
});

Note que eu também retirei o pseudo-seletor :last-child. Este seletor serve para escolher sempre o último elemento-filho do elemento-pai - ou seja, o evento só seria disparado quando a pessoa clicasse no último elemento da lista.

1
  • 1
    Marquei ela correta pelo detalhe do :last-child. A primeira resposta so corrigiu isso depois. Utilizei isso no meu teste: doforneiro.com.br/lista1.html
    – Joao Paulo
    Commented 28/02/2014 às 19:47
12

Tente usar assim:

$(document).ready(function () {
    $(document).on('click','.item', function (e) { // retirei o :last-child
        e.stopPropagation(); // impedir a propagaço do evento pelos li's
         console.log($(this).parent()); // também pode usar .closest('ul')
    });
});

Exemplo

Repare que no seu HTML um dos <ul> näo têm o fecho correcto:

        <ul>  // aqui devia ser </ul>
    </li>
</ul>

Pode ler mais aqui sobre o event.stopPropagation(), mas no fundo impede que o evento clic se propague na árvore DOM e seja disparado em outros elementos.

O :last-child que tinha estava a impedir amarrar o evento ao Neto 1, por isso o Filho estava a aparecer em vez do esperado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .