如何按数据属性过滤元素

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是将要搜索的数据标签。

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

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

 $(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) }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <h2>Filterable rows by data tag</h2> <p>Type something in the input field to search for one of the available data tags (<b>icon1</b> for green buttons and <b>icon2</b> for blue one):</p> <input id="myInput" type="search" placeholder="Search"> <div class="tab-content" id="myTable"> <div class="tab-pane fade show active" id="tab1" role="tabpanel"> <div class="row"> <div class="col-md-6"> <div class="card"> <button class="btn btn-success"><i data-eva="icon1">Button1</i></button> </div> </div> <div class="col-md-6"> <div class="card"> <button class="btn btn-info"><i data-eva="icon2">Button2</i> </button> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card"> <button class="btn btn-success"><i data-eva="icon1">Button3</i></button> </div> </div> <div class="col-md-6"> <div class="card"> <button class="btn btn-success"><i data-eva="icon1">Button4</i> </button> </div> </div> </div> </div> </div> </div> 

Answer 2

您实际上并不需要jQuery来执行此操作。 您可以过滤每个元素的dataset上的元素数组（使用Array.from和document.querySelectorAll ）。 就像是：

 (() => { const relevant = Array .from(document.querySelectorAll("span")) .filter(el => el.dataset.some === 'Hello' || el.dataset.some === 'world'); relevant.forEach(elem => elem.textContent = elem.dataset.some); })() 

 <span data-some="Hello"></span> <span data-some="planet"></span> <span data-some="universe"></span> <span data-some="world"></span>