How to add class to all read except the one that was clicked

Asked

Viewed 78 times

1

I want to add a class hidden for all li, but not for the li that was clicked. How can I do this using jQuery?

jQuery(".render-menu li").on('click', function() {
  alert();
  jQuery(".render-menu").not($(this)).parent().addClass('hidden');
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="render-menu">
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

jquery

  • It was typo, I’ve made the correction.

  • 1

    It is interesting to note that to apply the class you did not select the elements <li>, only the class .render-menu, which is the <ul>; then did the not with the this, that will do nothing, because the this will be the <li> pressed; then takes the parent element, which will be the parent element of the <ul>, in the example will be the <body> whole and finally you add the class hidden. Instead of hiding the <li> you have hidden page :D

3 answers

4


You’re already using the jQuery.not() which does just what you need, it returns a jQuery object by removing the element passed to it from the set.

var $items = $(".render-menu li");

$items.on('click', function() {
  $items.not(this).addClass('hidden');
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="render-menu">
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

  • Very nice young man! I will stop answering questions from jQuery :D

  • No stop! hahahaha You have to move it here.

  • Sometimes I think about stopping to give a thorough study of jQuery, because everything I know I learned in the same slap. Only then I think, better study Vanilla JS at once... But it turns out that I don’t stop to study is nothing haha. But I see that I have to learn this better before I answer "anyway" because I see that sometimes I can inhibit people who fail to give a better answer than my only answer because they already have an answer to the question, even though it’s not "the best answer"...

  • 1

    Knowing Vanilla JS you already get well.. In my opinion the time of jQuery is passing, it is more worth studying React or Vue.

3

You can solve using the methods .hide() and .show() thus: 

jQuery(".render-menu li").on('click', function() {
  $(".render-menu li").hide();
  $(this).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="render-menu">
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

  • 3

    Or just $(".render-menu li").not(this).hide(), not to hide and display again :D

  • 1

    @Andersoncarloswoss this comment completed what a voice was saying in my head that "you can do with one line"... Thanks for the tip!

3

There is still the method siblings of the jQuery that returns the sibling elements, that is, elements that are on the same level of the DOM as the element in question. Optionally it is possible to set a selector as parameter, siblings('li').

$(".render-menu li").on('click', function() {
  $(this).siblings().addClass('hidden');
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="render-menu">
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

  • Very nice young man! Unfortunately I think jQuery will die before I learn how it works right...

Browser other questions tagged jquery

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