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

码：

<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并单击按钮，然后按那些类= adr进行查询，得到的结果是location1，该怎么做？

最佳答案

如果要搜索位置，则可以使用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>