javascript - 如何使用同一个类的js查询标签？

Question

代码:

<input id="search"/><button onclick="query()">search</button>
<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>

例如我输入location1并单击按钮，然后它通过那些class = adr查询并得到结果是location1，怎么做？

Answer 1

如果您尝试搜索位置，可以使用 filter() 获取所有具有 adr 类的元素，并测试它们的 text() 包含 #search

的值

show()结果。

function query() {
  var search = $("#search").val().trim();        //Get the value of search

  $(".adr").hide().filter(function() {
    return $(this).text().includes(search);
  }).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" /><button onclick="query()">search</button>
<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>