Question

我是Javascript的初学者，我在jQuery中使用过滤器函数（对于下拉列表中的研究栏）。

它会在我下面的HTML代码中过滤<h1>个代码之间的所有内容，我希望它只过滤<span>代码之间的文本。（本例中为azerty1）

的Javascript

function filterFunction() {
    var input, filter, div, h1, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    /*Catch everything between tags <h1> and </h1>*/
    h1 = div.getElementsByTagName("h1");

    for (i = 0; i < h1.length; i++)
    {
        if (h1[i].innerHTML.toUpperCase().indexOf(filter) > -1)
        {
            h1[i].style.display = "";
        }
        /*No resultat = display nothing*/
        else
        {
            h1[i].style.display = "none";
        }
    } }

HTML

<div class="dropdown">
  <button  class="buttonMe"></button>
    <div id="myDropdown" class="dropdown-content">
      <!--Filter bar-->
      <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()">
      <ul class="dropdown-menu scrollable-menu">
        <li class="dropdown-header">Blablabla 1</li>
        <li>
          <h1><img src="images/dropdown/1.png"><span>azerty1</span></h1>
        </li>
      </ul>
    </div>
</div>

Example when I filter with A

它显示了我的一切，因为它从img src =“im a ges /...

开始

Example when I filter with AZ

它向我展示了正确的东西，因为只有 az erty1以AZ开头

我不知道在子字符串和忽略第一个孩子（img标签）之间使用什么，以及如何使用它们，以及将这些代码放在我的javascript中的位置（可能在for循环中）< / p>

Answer 1

您只需使用h1[i].getElementsByTagName('span')[0].innerHTML代替h1[i].innerHTML

即可阅读范围代码的内容

function filterFunction() {
    var input, filter, div, h1, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    /*Catch everything between tags <h1> and </h1>*/
    h1 = div.getElementsByTagName("h1");

    for (i = 0; i < h1.length; i++)
    {
        if (h1[i].getElementsByTagName('span')[0].innerHTML.toUpperCase().indexOf(filter) > -1)
        {
            h1[i].style.display = "";
        }
        /*No resultat = display nothing*/
        else
        {
            h1[i].style.display = "none";
        }
    } }

<div class="dropdown">
  <button  class="buttonMe"></button>
    <div id="myDropdown" class="dropdown-content">
      <!--Filter bar-->
      <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()">
      <ul class="dropdown-menu scrollable-menu">
        <li class="dropdown-header">Blablabla 1</li>
        <li>
          <h1><img src="images/dropdown/1.png"><span>azerty1</span></h1>
          <h1><img src="images/dropdown/2.png"><span>test</span></h1>
        </li>
      </ul>
    </div>
</div>

在jQuery数组中使用substring（）

1 个答案: