Why doesn't addClass show and hide the element as expected?

December 20, 2021

What are the differences in hide(), show() and .addClass in these two examples, and why does .addClass not work in the second example?

These two examples are simple jQuery search functions that use :contain to find the search terms in the .record divs.

This example works with hide() and show().

$(document).ready(function() {
  $('#search').keyup(function() {

    var text = $(this).val().toLowerCase();

    $('.record').hide();

    $('.record').each(function() {

      if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
        $(this).closest('.record').show();
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>

But what I need to do in the example below is

use the classes .display-none and .display-block, rather than hide() and show(), as I am using hide() and show() in another Javascript function with the same .reason html markup.
Unlike the above example, initially display:none all the .record divs, so they are hidden and only shown with display:block when they are actually search results.

$(document).ready(function() {
  $('#search').keyup(function() {

    var text = $(this).val().toLowerCase();

    $('.record').addClass("display-none");

    $('.record').each(function() {

      if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
        $(this).closest('.record').addClass("display-block");
      }
    });
  });
});

.display-block {
  display: block !important;
}

.display-none {
  display: none !important;
}

.record {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>

>Solution :

Look at this small example of what you are running into. You have multiple classes being applied to each other with the same CSS specificity

.three { color: red; }
.two { color: yellow; }
.one { color: blue; }


.one { background-color: green; }
.two { background-color: black; }
.three { background-color: silver; }

<div class="one two three">one two three</div>
<div class="one two">one two</div>
<div class="one">one</div>

So when the rules all have the same specificity. The last one in the list wins. Since the last one is display none, they are all hidden.

You are also using closest when there is no need. You are on the record so no bother to look it up again.

Change your code to add one class to hide the element. Make the specificity higher so you do not have to deal with important.

$(document).ready(function() {
  $('#search').keyup(function() {
    var text = $(this).val().trim().toLowerCase();
    $('.record.display-block').removeClass("display-block");
    if (!text.length) return;
    $('.record').each(function() {
      if ($(this).text().toLowerCase().includes(text)) {
        $(this).addClass("display-block");
      }
    });
  });
});

.record.display-block {
  display: block;
}

.record {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>