jquery 每個 function 搜索欄內的文本

Question

它打印一個空字符串，應該打印“Admin”並隱藏不包含 searchBar 文本的元素，keyUp 被觸發，當我 console.log($(this).text( )), searchBar 是一個輸入字段，用於在列表中搜索事物

 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

最后我這樣解決

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是指 window。 我修復了它，所以它抓住了實際的元素： 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>