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

Answer 1

如果您要搜索位置，则可以使用filter()获取类为adr的所有元素，并测试它们的text()是否包含#search的值< / p>

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>

Answer 2

我不确定这到底是什么意思，但这是我认为您想要的非jQuery解决方案：

function query() {
  var els = document.getElementsByClassName("adr");
  var input = document.getElementById("search");
  var content = document.getElementById("content");
  var tag = null;
  for (var i = 0; i < els.length; i++) {
    if (els[i].innerHTML === input.value) {
      tag = els[i];
    }
  }

  // Tag contains the element now
  content.innerHTML = tag.innerHTML;
  return tag;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <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>
    <div id="content"></div>
  </body>

</html>

包含所搜索值的元素由该函数返回，并且还应用于DOM以进行展示。

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

2 个答案: