7

Por exemplo:

  1. Tenho mais de uma ul com suas li;
  2. Se clico em uma li da primeira ul ela tem que adicionar uma classe;
  3. Se clico em uma li da segunda ul, ela adiciona essa mesma classe. Só que não interfere na lista da primeira ul;

Pra ficar mais esclarecido, é como se cada ul fosse um grupo de radio button, onde apenas um por grupo é marcado.

Alguma idéia?

5
  • Interessante. São 3 respostas satisfatórias, mas escritas de maneiras relativamente distintas. Fiquei curioso com o seguinte: que parâmetros poderiam ser usados para definir qual é a melhor?
    – iuristona
    Commented 11/02/2014 às 12:30
  • Realmente todas respostas deram certo. Não sei ainda em qual votar. Commented 11/02/2014 às 12:38
  • Faz um JSPerf e vota na que tiver melhor desempenho, afinal provavelmente será o melhor algorítimo. Commented 11/02/2014 às 16:30
  • Como funciona @GabrielGartz ? Não entendi muito bem. Commented 11/02/2014 às 16:35
  • Fiz os testes pra você Jefferson, espero que ajude: jsperf.com/alteradores-de-classe Commented 11/02/2014 às 16:50

5 Respostas 5

4

Aqui tem o link para o exemplo completo: http://jsfiddle.net/2Mu2F/

Basicamente o seguinte código faz é:
1) Quando o documento estiver carregado adiciona evento click ao cada li.
2) Quando é clicado, remove de todas os li do ul mais proximo a classe selected
3) Adiciona classe selected para o li que foi selectionado

$( document ).ready(function() {
    $('li').click(function() {
        $(this).closest('ul').find('li').removeClass('selected');
        $(this).addClass('selected');
    });
});
1
2

Primeiro você deve remover a classe de qualquer li dentro da ul:

$('#id_ul li').removeClass('minha_classe');

Depois você adiciona na li que foi clicada o evento:

$(this).addClass('minha_classe');

isso deve ser feito dentro de um click na li.

Exemplo completo

$("#id_ul li").on("click", function(){
    $('#id_ul li').removeClass('minha_classe');
    $(this).addClass('minha_classe');
});
2

Utilize o .siblings() assim vicê só vai alterar os elementos que estiverem dentro do mesmo nível da ul

$( document ).ready(function() {
    $('li').click(function() {
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    });
});

É um código curto e cumpre exatamente sua necessidade.

É basicamente o mesmo código do Serhiy só trocando o uso o .closest() e .find() você usa apenas o .siblings() e manipula todos os elementos que estiverem no mesmo nível do selecionado.

2
  • Ummm, onde viu a parte de modificar todos os li? Só se modificam os li do ul mais proximo... É o que closest faz..
    – Serhiy
    Commented 11/02/2014 às 15:37
  • Realmente me equivoquei, já editei a resposta :D Commented 11/02/2014 às 15:49
1

Primeiro, dê uma classe a suas uls. Vamos nomeá-las de tipoRadio. E a classe dos itens selecionados será selecionado.

$(function() {
    $(".tipoRadio").on("click", "li", function() {
        var ul = $(this).parent(".tipoRadio");
        ul.children("li").removeClass("selecionado");
        $(this).addClass("selecionado");
    });
});

Fiddle

5
  • Não ficaria melhor aplicar o evento click direto na ul? Commented 11/02/2014 às 12:23
  • Na ul? Porque? Commented 11/02/2014 às 12:24
  • Porque você adiciona um evento na filha da ul, pra pegar a ul. Ficaria melhor, na minha opinião, aplicar o evento só em .tipoRadio e atribuir apenas o $(this), que já te dá a ul direto, não? Commented 11/02/2014 às 12:25
  • Mas eu preciso da li clicada de qualquer jeito. Como eu vou saber qual selecionar? Commented 11/02/2014 às 12:26
  • Verdade, não tinha pensado nisso. Commented 11/02/2014 às 12:27
0

Para complementar, e se quiseres obter mais conhecimento sobre este assunto, sugiro que acesse este site https://www.codeschool.com/courses, nele existem alguns cursos gratuitos que lhe serão muito úteis.

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 .