时间戳

首页 > 解决方案 > 用于锚文本或标题属性的 JQuery 过滤器

javascript - 用于锚文本或标题属性的 JQuery 过滤器

问题描述

我正在尝试过滤标题或锚文本，以便例如“lala2”或“text2”或“2”将其他人切换走（在这种情况下为1）......我想要不包含该字符串的锚消失。

<input id="myInput" type="text" placeholder="Search..">

<div id="myList">
  <a class="someclass" title="title text lalalala1" href="blah.com">some anchor text1</a>
  <a class="someclass" title="title text lalalala2" href="blah2.com">some anchor text2</a>
  etc       
</div>

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList a").filter(function() {
      $(this).toggle($(this).text.toLowerCase().indexOf(value) > -1)
    });
  });
});

尝试：过滤 this.title

$("#myList a, #myList a[title]").filter(function()

以及有无 $(this).toggle.parent() 和其他一些东西。它适用于锚点内的文本，即切换不包含“值”的锚点，但不能让它为锚点标题属性和直接锚点文本做到这一点。

标签： javascriptjqueryhtml

解决方案

更改：
•keyup → input更可预测 - 即使您同时按下多个键，也适用于复制粘贴。
• filter → each— 只需要任何循环，但不需要过滤元素列表。
• $(this).text().toLowerCase()— 为 text() 添加了括号 — 这是一个 jQuery 函数。
• includes()— 本机JavaScript 字符串方法。检查一个字符串是否包含另一个字符串。如果您只想检查而不是获取它的索引，则最好使用它。返回true或false
• ||— 表示布尔表达式中的“或”（顺便说一下&&——“与”）

$("#myInput").on("input", function() {
  var value = $(this).val().toLowerCase();

  $("#myList a").each(function() {
    $(this).toggle(
      $(this).text().toLowerCase().includes(value) ||
      $(this).attr('title').toLowerCase().includes(value)
    );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="type 'lala2'...">

<div id="myList">
  <a class="someclass" title="title text lalalala1" href="blah.com">some anchor text1</a>
  <a class="someclass" title="title text lalalala2" href="blah2.com">some anchor text2</a> etc
</div>

推荐阅读