Question

我有这段代码用于过滤/搜索特定元素。我需要使其与数据属性一起使用。

例如：

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

当前正在寻找文本，我需要使它寻找data-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)
    });
  });
});

Answer 1

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

$("i[data-eva=icon]")

或获取如下所示的数据标签值：

$("i").attr("data-eva")

修改：
示例代码已更新。

在javascript部分：

$("#myInput")确定您的搜索输入元素ID。
$("#tab1 .card")确定将根据搜索词隐藏或显示的元素。
在find("i")中，i确定具有数据标签的元素。
显然，在attr("data-eva")中，data-eva是将要搜索的数据标签。

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

下面的代码段根据每行card的{{1}}在各行中搜索类别为data-eva的元素，并隐藏与输入项不匹配的元素。

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#tab1 .card").filter(function() {
      $(this).toggle($(this).find("i").attr("data-eva").toLowerCase().indexOf(value) > -1)
    });
  });
});

如何通过数据属性过滤元素

1 个答案: