How to add a class to a <li> by clicking on it, leaving only it with this class?

Asked

Viewed 2,130 times

7

For example:

  1. I have more than one ul with their li;
  2. If I click on a li of the first ul she has to add a class;
  3. If I click on a li of the second ul, she adds that same class. Only that does not interfere with the list of the first ul;

To be more clear, it’s as if each ul were a radio button group, where only one per group is marked.

Any idea?

javascript jquery html css

  • Interesting. There are 3 satisfactory answers, but written in relatively different ways. I was curious about the following: which parameters could be used to define which is the best?

  • All answers really worked. I don’t know yet which one to vote on.

  • Makes a Jsperf and vote for the one with the best performance, after all probably will be the best algorithm.

  • How does @Gabrielgartz work? I don’t quite understand.

  • I ran the tests for you Jefferson, I hope it helps: http://jsperf.com/alteradores-class

5 answers

4


Here is the link to the full example: http://jsfiddle.net/2Mu2F/

Basically the following code does is:
1) When the document is loaded add event click to each read.
2) When clicked, remove from all li of the nearest ul the class Selected
3) Adds class Selected to the selected li

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

2

First you must remove the class from any li within the ul:

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

Then you add in li that was clicked the event:

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

this should be done within a click in li.

Full example

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

2

Use the .siblings() so vicê will only alter the elements that are within the same level of ul

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

It is a short code and exactly meets your need.

It’s basically the same code as Serhiy only changing the use the .closest() and .find() you use only the .siblings() and handles all elements at the same level as the selected.

  • Ummm, where did you see the part of modifying all the li? Only modify the li of the nearest ul... That’s what Closest does..

  • I was really wrong, I already edited the answer :D

1

First, give your class uls. We will name them tipoRadio. And the class of selected items will be selecionado.

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

Fiddle

  • It would not be better to apply the event click right in the ul?

  • In the ul? Because?

  • Because you add an event on the daughter of ul, to catch the ul. It would be better, in my opinion, apply the event only in .tipoRadio and assign only $(this), which already gives you the ul direct, no?

  • But I need the li clicked anyway. How will I know which to select?

  • True, I hadn’t thought of that.

0

To complement, and if you want more knowledge on this subject, I suggest you visit this site https://www.codeschool.com/courses, there are some free courses that will be very useful.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.