Javascript 如何按数据属性筛选元素

我有此代码用于筛选/搜索特定元素。我需要使它与数据属性一起工作

例如：

<i data-eva="icon"></i>

---

使用JQuery，您可以按如下数据标记进行选择：

$（“i[data eva=icon]”）

或按如下方式获取数据标签值：

$（“i”）.attr（“数据eva”）

编辑：
示例代码已更新

在javascript部分：

• $（“#myInput”）

  确定搜索输入元素id

• $（“#tab1.card”）

  根据搜索词确定将隐藏或显示的元素
• 在

  find（“i”）

  中，

  i

  确定具有数据标签的元素
• 显然，在

  attr（“data eva”）

  中，

  data eva

  是要搜索的数据标签

您可以根据需要更改上述任何选择器

下面的代码段根据每行中

i

的

data eva

搜索具有class

card

的元素，并隐藏与输入项不匹配的元素

$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#tab1.card”）.filter（函数（）{
$（this）.toggle（$（this）.find（“i”）.attr（“data eva”）.toLowerCase（）.indexOf（value）>-1）
});
});
});

按数据标记筛选的行
在输入字段中键入一些内容以搜索一个可用的数据标记（icon1表示绿色按钮，icon2表示蓝色按钮）：

按钮1
按钮2
按钮3
按钮4
使用JQuery，您可以通过如下数据标记进行选择：

$（“i[data eva=icon]”）

或按如下方式获取数据标签值：

$（“i”）.attr（“数据eva”）

编辑：

示例代码已更新

在javascript部分：


$（“#myInput”）
确定搜索输入元素id
$（“#tab1.card”）
根据搜索词确定将隐藏或显示的元素
在
find（“i”）
中，
i
确定具有数据标签的元素
显然，在
attr（“data eva”）
中，
data eva
是要搜索的数据标签

您可以根据需要更改上述任何选择器

下面的代码段根据每行中
i
的
data eva
搜索具有class
card
的元素，并隐藏与输入项不匹配的元素


$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#tab1.card”）.filter（函数（）{
$（this）.toggle（$（this）.find（“i”）.attr（“data eva”）.toLowerCase（）.indexOf（value）>-1）
});
});
});

按数据标记筛选的行
在输入字段中键入一些内容以搜索一个可用的数据标记（icon1表示绿色按钮，icon2表示蓝色按钮）：

按钮1
按钮2
按钮3
按钮4
我会的，但我需要更好地解释代码中需要数据标记的位置。下面是一个使用表的类似示例。添加了一个搜索数据标记的示例。如果您指定了数据标记的位置，我可以对其进行编辑，使其与您试图实现的目标相匹配。我尝试过这个方法，但不起作用$（document）.ready（function（）{$（“#myInput”）.on（“keyup”，function（）{var value=$（this）.val（）.toLowerCase（）；$（“#myTable button”）.filter（function（）{$（this）.toggle（$（this）.attr（“data eva”）.toLowerCase（）.indexOf（value）>-1）；}）；这是我的html，我会的，但我需要更好地解释代码中需要数据标记的地方。添加了一个搜索数据标记的示例。如果您指定了数据标记的位置，我可以对其进行编辑，使其与您试图实现的目标相匹配。我尝试过这个方法，但不起作用$（document）.ready（function（）{$（“#myInput”）.on（“keyup”，function（）{var value=$（this）.val（）.toLowerCase（）；$（“#myTable button”）.filter（function（）{$（this）.toggle（$（this）.attr（“data eva”）.toLowerCase（）.indexOf（value）>-1）；}）；这是我的html试试这个
$（“i”）.attr（“数据eva”）
试试这个
$（“i”）.attr（“数据eva”）
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});