使用 javascript 在 <div> 中搜索文本答案

【问题标题】：Search <div> for text using, javasccript使用 javascript 在 <div> 中搜索文本
【发布时间】：2022-02-15 00:14:10
【问题描述】：

我不懂javascript，但我想使用，在我的网站上搜索。我在stackoverflow上找到了一个很好的例子link 我加入了所有部分并收到以下代码：

function SearchName() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var card = document.getElementsByClassName('card');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      card[i].style.display = "block";
    } else {
      card[i].style.display = "none";
    }
  }
}

<input id="Search" onkeyup="SearchName();" class="form-control dsh191" type="text" placeholder="search" name="" />


<div class="d-flex m-0 p-0">
    <div class="card">
        <a href="#" class="dsh192 target">Abc Def</a>
        <p class="dsh185">Code: <span class="code">1234</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Qwr Tyu</a>
        <p class="dsh185">Code: <span class="code">5678</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Iop Klj</a>
        <p class="dsh185">Code: <span class="code">9000</span></p>
    </div>
</div>

一切正常，但我需要通过class = 'code' 进行搜索。我的问题是：如何搜索 <a href="#" class="dsh192 target">Qwr Tyu</a> 和 <p class="dsh185">Code: <span class="code">5678</span></p> ？我尝试了什么？我复制了 javascript 函数代码并将类从目标更改为代码，但没有收到任何内容，现在搜索在输入中的第一个函数之后进行。

我在输入SearchCode();中添加了一个新函数；
在<span>5678</span> 我添加了class="code"
正如我上面所说，我配音 javascript 代码并更改了 2 个变量：从 nodes 到 code 新类名和从 card 到 profilecard，只有新变量但 html 标记保持不变.

function SearchName() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var card = document.getElementsByClassName('card');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      card[i].style.display = "block";
    } else {
      card[i].style.display = "none";
    }
  }
} 

  function SearchCode() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var code = document.getElementsByClassName('code');
  var profilecard = document.getElementsByClassName('card');

  for (i = 0; i < code.length; i++) {
    if (code[i].innerText.toLowerCase().includes(filter)) {
      profilecard[i].style.display = "block";
    } else {
      profilecard[i].style.display = "none";
    }
  }
}

<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />


<div class="d-flex m-0 p-0">
    <div class="card">
        <a href="#" class="dsh192 target">Abc Def</a>
        <p class="dsh185">Code: <span class="code">1234</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Qwr Tyu</a>
        <p class="dsh185">Code: <span class="code">5678</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Iop Klj</a>
        <p class="dsh185">Code: <span class="code">9000</span></p>
    </div>
</div>

我的问题：如何在 2 个 html 标签后搜索网站（按标签中的文本搜索）？

知道如何更改代码，或者我哪里出错了等等...谢谢

【问题讨论】：

尝试搜索然后他们不能一起工作
它适用于.code 当你说的时候我读错了吗，"...但我需要按 class= 'code' 搜索。"？真正的问题是你想同时搜索.code 和.target？
是的，我要搜索 .code 和 .target
@zer00ne 我用翻译写，如果我有错误请更正帖子以供其他人理解

标签： javascript

【解决方案1】：

一个想法可以是在父标签profileCard上使用innerText

function SearchName() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var card = document.getElementsByClassName('card');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      card[i].style.display = "block";
    } else {
      card[i].style.display = "none";
    }
  }
} 

  function SearchCode() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var code = document.getElementsByClassName('code');
  var profilecard = document.getElementsByClassName('card');

  for (i = 0; i < code.length; i++) {
    if (profilecard[i].innerText.toLowerCase().includes(filter))                         {
      profilecard[i].style.display = 'block';
    } else {
      profilecard[i].style.display = 'none';
    }
  }
}

<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />


<div class="d-flex m-0 p-0">
    <div class="card">
        <a href="#" class="dsh192 target">Abc Def</a>
        <p class="dsh185">Code: <span class="code">1234</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Qwr Tyu</a>
        <p class="dsh185">Code: <span class="code">5678</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Iop Klj</a>
        <p class="dsh185">Code: <span class="code">9000</span></p>
    </div>
</div>

【讨论】：