Why removeClass / addClass doesn't work if using it for array $('.randomClass')[i]?

Question

Hello I want to implement search functionality to the card list. So my plan is to go through all the elements (using for loop) named, "card" and check if input value matches or not. So first I add "hide" class to all the element then If input value matches with the card class's inner HTML then I will remove hide class and add "show" class. But the problem is in the 6,7 no. line. saying removeClass /addClass is not a function. whenever I'm using $('.name')[i] I'm getting that error. Can anyone please help? HTML: <input id="search" type="text" class="styled-input" placeholder="search here..."/>

  <ul id="contact-list" class="scroller">
      <li class="card"> <h2> John Doe 1 </h2> </li >
      <li class="card"> <h2> John Doe 2 </h2> </li>
      <li class="card"> <h2> Mr. Anderson </h2> </li>    </ul>

My JS code is something like this:

1. let search = $('#search');
2. search.addEventListener("input", e => {
3.     const value = e.target.value;
4.     for (let i = 0; i < $(".name").length; i++) {
5.         if ($(".name")[i].innerHTML.includes(value)) {
6.              $(".name")[i].closest("li").removeClass("hide");
7.              $(".name")[i].closest("li").addClass("show");
            }
   }

score 0 · Answer 1 · answered May 23 '22 at 06:29

You should loop through DOM objects using the .each() method, since it's made for DOM looping. You can than easily access each item using $(this)

I assume, you wan't to loop through each "card" and if it contains some specific value, you want to remove the hide class.

$('.card').each(function(){
  if($(this).val().indexOf("some value") > -1)
  {
     $(this).removeClass("hide").addClass("show");
  }
});

Note that this attempt requires a value in the <li> element. If you want to check for the text inside the <li>, you can use $(this).text() instead of $(this).val()

score 0 · Answer 2 · answered May 23 '22 at 06:33

You are mixing JS and JQuery together so that the code has several errors. You can refer to below adjusted code for your reference.

document.getElementById('search').addEventListener("input", e => {
  const value = e.target.value;
  //jQuery part
  $(".card").each(function(){
    if($(this).html().includes(value)){
      $(this).removeClass("hide");
      $(this).addClass("show");
    }
});

JQuery Object is different from DOM Object. You can refer to this: document.getElementById vs jQuery $()

score 0 · Answer 3 · answered May 23 '22 at 06:58

The following will probably do what you want without using jQuery:

const lis=[...document.getElementById('contact-list').children];
document.getElementById('search').addEventListener("input", e => {
 const value = e.target.value.toLowerCase();
 lis.forEach(l=>l.classList.toggle("hide",value.length==0||!l.textContent.trim().toLowerCase().includes(value)))
})

.hide {display:none}

<input id="search" placeholder="enter search word"><br>
<ul id="contact-list" class="scroller">
  <li class="card hide">
    <h2> John Doe 1 </h2>
  </li>
  <li class="card hide">
    <h2> John Doe 2 </h2>
  </li>
  <li class="card hide">
    <h2> Mr. Anderson </h2>
  </li>
</ul>

Why removeClass / addClass doesn't work if using it for array $('.randomClass')[i]?

3 Answers3