Как сделать div невидимым для JavaScript? - PullRequest
Новая
       1

Как сделать div невидимым для JavaScript?

0 голосов
/ 06 сентября 2018

Итак, у меня есть следующий код: 

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, а не только "li", в зависимости от входных данных, div должен отображаться или нет. Показанный выше мой код прямо сейчас.

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 07 сентября 2018

Вы должны привести в порядок свой html с учетом повторяющихся идентификаторов, а <li> s не являются прямыми детьми, если <ul>.

Сделав это, совет @ Амбуж Ханны должен быть полезным. Возможно, вам придется применять parentElement несколько раз.

Мне пришло в голову, что вся операция - это то, что можно было сделать с помощью jQuery в две строки: 

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

Вышеприведенные элементы должны показывать div верхнего уровня - чуть ниже вашего <ul#myUl> - и скрывать все остальные. Однако элемент ниже <ul> всегда должен быть элементом <li>.

0 голосов
/ 07 сентября 2018

Спасибо всем за помощь! Проблема решена. Я просто использовал парсер JQuery для div, и все работало довольно хорошо.

0 голосов
/ 07 сентября 2018

Пока вы показываете свой «LI», вы можете показать его родительский DIV, используя «parentElement». Пожалуйста, проверьте ниже фрагмент.

Ваш код 

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

Новый код 

li[i].parentElement.style.display = "none";
li[i].parentElement.style.display = "";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...