jquery text inside each function search bar

Question

It prints an empty string, supposed to print "Admin" and hide the elements that don't contains the searchBar text, keyUp is being triggeree, it just gives me an empty string when i console.log($(this).text()), searchBar is an input field to search things in a list

 const searchBar = $(".users-layout.search input") searchBar.on("keyup", () => { if (searchBar.val().= "") { $(".users-list-name").each(() => { if (.$(this).text().toLowerCase().includes(searchBar.val().toLowerCase())) { console.log($(this).text()) $(this).hide() } else { console.log($(this).text()) $(this).show() } }) } })

 <div class="users-list"> <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a> <div class="content"> <div class="details"> <span class="users-list-name">Admin</span> <p>Test Message</p> </div> </div> <div class="status-dot"><i class="fas fa-circle"></i></div> </div> <div class="users-list"> <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a> <div class="content"> <div class="details"> <span class="users-list-name">Admin</span> <p>Test Message</p> </div> </div> <div class="status-dot"><i class="fas fa-circle"></i></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 1

at the end i resolved like this

searchBar.on("keyup", ()=>{
  if (searchBar.val() != "") {
    $(".users-list-name").each((i, obj)=>{
      console.log($(obj))
      if (!$(obj).text().toLowerCase().includes(searchBar.val().toLowerCase())){
        $(obj).parent().parent().parent().hide()
      } else {
        $(obj).parent().parent().parent().show()
      }
    }
  )
} else {
  $(".users-list").show()
}
})

Answer 2

this was refering to the window. I fixed it so it grabs the actual element: let elem = $(".users-list-name")[index]

 const searchBar = $(".users-layout.search input") searchBar.on("keyup", () => { if (searchBar.val().= "") { $(".users-list-name").each(index => { let elem = $(".users-list-name")[index] if (.$(elem).text().toLowerCase().includes(searchBar.val().toLowerCase())) { console.log($(elem).text()) $(elem).hide() } else { console.log($(elem).text()) $(elem).show() } }) } })

 <div class="users-layout"> <div class="search"> <input /> </div> </div> <div class="users-list"> <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a> <div class="content"> <div class="details"> <span class="users-list-name">Admin</span> <p>Test Message</p> </div> </div> <div class="status-dot"><i class="fas fa-circle"></i></div> </div> <div class="users-list"> <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a> <div class="content"> <div class="details"> <span class="users-list-name">Admin</span> <p>Test Message</p> </div> </div> <div class="status-dot"><i class="fas fa-circle"></i></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>