使用getElementsByClassName返回多个项目

时间:2019-04-16 11:31:05

标签: javascript html

我是JS的新手,我遵循W3CSchools筛选器列表指南,该指南在使用getElementbyId时效果很好,但是据我了解,ID必须是页面唯一的。

我已更改为getElementsByClassName,但它似乎无法正常工作。我只想在myUL类而不是在somedivclass3中可以找到的其他UL类中过滤结果。

我还希望能够以任何顺序匹配整个或部分单词,例如 “ diff”将匹配4 li中的3 li,“ different even”应匹配1 li。

JS:

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementsByClassName("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

HTML:

<input type="text" id="myInput" placeholder="Search for names..">
<input type="submit" onclick="myFunction()" value="Go">

    <div class="somedivclass1">
       <ul class="myUL">
          <li>Text here</li>
          <li>Different text here</li>
       </ul>
    </div>

    <div class="somedivclass2">
        <ul class="myUL">
           <li>Even more different text here</li>
           <li>Wildly different text here</li>
        </ul>
    </div>

   <div class="somedivclass3">
        <ul class="otherUL">
           <li>Footer link 1</li>
           <li>Footer link 2</li>
        </ul>
    </div>

我希望它可以按照W3C学校中的示例进行操作:https://www.w3schools.com/howto/howto_js_filter_lists.asp

谢谢您的帮助!

2 个答案:

答案 0 :(得分:0)

getElementsByClassName()将返回一个元素数组,因为可能有很多具有相同类的元素。因此,请尝试先遍历所有ul,然后遍历li:


    for (i = 0; i < ul.length; i++) 
    {
      li = ul[i].getElementsByTagName('li');

      for(j = 0; j< li.length; j++)  
      {
        a = li[j].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;

        if (txtValue.toUpperCase().indexOf(filter) > -1) 
        {
          li[j].style.display = "";
        } 
        else 
        {
          li[j].style.display = "none";
        }

      }
    }

答案 1 :(得分:0)

我稍微重写了您的功能,您可以将其作为代码段找到。

使用正确的类在“ ul”上进行第一次循环,然后在“ li”上进行第二次循环 使用jquery,您只需一行即可:)

function myFunction() {
  // Declare variables
  var input = document.getElementById('myInput');
  var filter = input.value.toUpperCase();
  //var li = document.getElementsByTagName('li');
  var uls = document.getElementsByClassName("myUL");
  for (var i = 0; i < uls.length; i++) {
    var ul = uls[i];
    var lis = ul.getElementsByTagName("li");

    for (var j = 0; j < lis.length; j++) {
      var li = lis[j];
      var txtValue = li.textContent || li.innerText;
      if (filtering(txtValue, filter)) {
        li.style.display = "";
      } else {
        li.style.display = "none";
      }
    }
  }
}

function filtering(text, searchString) {
    const regexStr = '(?=.*' + searchString.split(/\,|\s/).join(')(?=.*') + ')';
    const searchRegEx = new RegExp(regexStr, 'gi');
    return text.match(searchRegEx) !== null;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<div class="somedivclass">
  <ul class="myUL">
    <li>Text here</li>
    <li>Different text here</li>
  </ul>
</div>

<div class="somedivclass2">
  <ul class="myUL">
    <li>Even more different text here</li>
    <li>Widly different text here</li>
  </ul>
</div>