Question

所以我有下一个代码：

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
      // div[i].style.display = "";
    } else {
      li[i].style.display = "none";
      //div[i].style.display = "none";
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebSite</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <style>
    * {
      box-sizing: border-box;
    }
    
    #networdapp {
      display: none;
    }
    
    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 12px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    
    #myUL {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    #myUL li a {
      border: 1px solid #ddd;
      margin-top: -1px;
      /* Prevent double borders */
      background-color: #f6f6f6;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      color: black;
      display: block
    }
    
    #myUL li a:hover:not(.header) {
      background-color: #eee;
    }
  </style>
</head>

<body>

  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" type="search" placeholder="Search">
  </form>

  <div id="test" class="networdapp">
    <div class="container" id="test2">
      <ul id="myUL">
        <div class="container-fluid" id="networdapp">
          <div class="row">
            <div v-for="result in results" class="col-sm-6">
              <div class="card m-3 h-240  bg-light">
                <div class="card-header text-center">
                  <li><a href="#">Adele</a></li>
                </div>
                <div class="card-body" style="height:200px">
                  <p class="card-text" v-html="result.prevDesc"></p>
                </div>
                <div class="card-footer bg-transparent border-info">
                  <a href="#" class="btn btn-info">Details</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="test" class="networdapp">
          <div class="container" id="test2">
            <ul id="myUL">
              <div class="container-fluid" id="networdapp">
                <div class="row">
                  <div v-for="result in results" class="col-sm-6">
                    <div class="card m-3 h-240  bg-light">
                      <div class="card-header text-center">
                        <li><a href="#">Agnes</a></li>
                      </div>
                      <div class="card-body" style="height:200px">
                        <p class="card-text" v-html="result.prevDesc"></p>
                      </div>
                      <div class="card-footer bg-transparent border-info">
                        <a href="#" class="btn btn-info">Details</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div id="test" class="networdapp">
                <div class="container" id="test2">
                  <ul id="myUL">
                    <div class="container-fluid" id="networdapp">
                      <div class="row">
                        <div v-for="result in results" class="col-sm-6">
                          <div class="card m-3 h-240  bg-light">
                            <div class="card-header text-center">
                              <li><a href="#">Billy</a></li>
                            </div>
                            <div class="card-body" style="height:200px">
                              <p class="card-text" v-html="result.prevDesc"></p>
                            </div>
                            <div class="card-footer bg-transparent border-info">
                              <a href="#" class="btn btn-info">Details</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div id="test" class="networdapp">
                      <div class="container" id="test2">
                        <ul id="myUL">
                          <div class="container-fluid" id="networdapp">
                            <div class="row">
                              <div v-for="result in results" class="col-sm-6">
                                <div class="card m-3 h-240  bg-light">
                                  <div class="card-header text-center">
                                    <li><a href="#">Bob</a></li>
                                  </div>
                                  <div class="card-body" style="height:200px">
                                    <p class="card-text" v-html="result.prevDesc"></p>
                                  </div>
                                  <div class="card-footer bg-transparent border-info">
                                    <a href="#" class="btn btn-info">Details</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </ul>
                      </div>
                    </div>
</body>


</html>

我要根据输入框的输入显示一些div。到目前为止，我只显示了“ li”标签，而我实际想要的是不显示整个div。取决于是否必须显示div的输入数据，仅显示“ li”。上面显示的是我的代码。

提前谢谢！

Answer 1

在显示“ LI”的同时，您可以使用“ parentElement”显示其父DIV。请检查以下代码段。

您的代码

li[i].style.display = "none";
li[i].style.display = "";

新代码

li[i].parentElement.style.display = "none";
li[i].parentElement.style.display = "";

Answer 2

您应该整理好html，以确保重复的ID和<li>如果不是<ul>不是直接子代。

@Ambuj Khanna的建议应该会有所帮助。您可能需要重复应用parentElement。

在我看来，整个操作可以使用jQuery在两行中完成：

var flt=$('#myInput').val().toUpperCase();
$('#myUl>div').each(function(i,div){$(div).toggle($('li',div).text().toUpperCase()==flt)})

以上内容应使最高div（位于<ul#myUl>下方）可见，并隐藏所有其他div。但是，<ul>下面的元素应该始终是<li>元素。

Answer 3

谢谢大家的帮助！问题现在解决了。我只对div使用了一个JQuery解析器，一切正常。

如何使div从javascript不可见？

3 个答案: