Как я могу удалить стиль отображения из всех дочерних элементов, когда я фильтрую из бутстрапа?

Я пытаюсь отфильтровать список сворачивания следующим образом:

Как вы видите, когда я фильтрую какой-либо идентификатор, появляется много дочерних элементов div.

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
   var value = $(this).val().toLowerCase();
    $("#chartClass *").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class = "row">
  <div class = "col-md-12 col-xl-12">
    <div class = "card">
      <div class = "card-block">
        <form class = "form-inline d-flex justify-content-center md-form form-sm">
          <i class = "fas fa-search" aria-hidden = "true"></i>
          <input id = "myInput" class = "form-control form-control-sm ml-3 w-75" type = "text" placeholder = "Search" aria-label = "Search">
        </form>
      </div>
    </div>
  </div>
</div>

<div class = "row" id = "chartClass">

  <div class = "col-xl-6" id = "firstkonyahal">
    <div class = "card" id = "secondkonyahal">
      <div class = "card-header" id = "firstheaderkonyahal">
        <h5><a href = "#!" data-toggle = "collapse" data-target = "#thirdkonyahal" aria-expanded = "false" aria-controls = "thirdkonyahal collapsed " class = "collapsed">konyahal</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdkonyahal" style = "display: block;">
        <div id = "chartDivkonyahal" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 457px; top: 59px; display: block;">
            <div class = "morris-hover-row-label">2020-12-10</div>
            <div class = "morris-hover-point" style = "color: #0b62a4">
              Value:
              73
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firsteskisehirtb" style = "display: block;">
    <div class = "card" id = "secondeskisehirtb" style = "display: flex;">
      <div class = "card-header" id = "firstheadereskisehirtb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdeskisehirtb" aria-expanded = "false" aria-controls = "thirdeskisehirtb collapsed " style = "display: inline;">eskisehirtb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdeskisehirtb" style = "display: block;">
        <div id = "chartDiveskisehirtb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 0px; top: 84px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-05</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              22
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstkonyatb">
    <div class = "card" id = "secondkonyatb">
      <div class = "card-header" id = "firstheaderkonyatb">
        <h5><a href = "#!" data-toggle = "collapse" data-target = "#thirdkonyatb" aria-expanded = "false" aria-controls = "thirdkonyatb collapsed ">konyatb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdkonyatb" style = "display: block;">
        <div id = "chartDivkonyatb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 49px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              19
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstankaratb" style = "display: block;">
    <div class = "card" id = "secondankaratb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderankaratb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdankaratb" aria-expanded = "false" aria-controls = "thirdankaratb collapsed " style = "display: inline;">ankaratb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdankaratb" style = "display: block;">
        <div id = "chartDivankaratb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 78px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              40
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstadanahal" style = "display: block;">
    <div class = "card" id = "secondadanahal" style = "display: flex;">
      <div class = "card-header" id = "firstheaderadanahal" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdadanahal" aria-expanded = "false" aria-controls = "thirdadanahal collapsed " style = "display: inline;">adanahal</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdadanahal" style = "display: block;">
        <div id = "chartDivadanahal" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 67px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              53
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstgapki" style = "display: block;">
    <div class = "card" id = "secondgapki" style = "display: flex;">
      <div class = "card-header" id = "firstheadergapki" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdgapki" aria-expanded = "false" aria-controls = "thirdgapki collapsed " style = "display: inline;">gapki</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdgapki" style = "display: block;">
        <div id = "chartDivgapki" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 35px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-09</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              1
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstmpob" style = "display: block;">
    <div class = "card" id = "secondmpob" style = "display: flex;">
      <div class = "card-header" id = "firstheadermpob" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdmpob" aria-expanded = "false" aria-controls = "thirdmpob collapsed " style = "display: inline;">mpob</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdmpob" style = "display: block;">
        <div id = "chartDivmpob" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 35px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-10</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              1
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstn11" style = "display: block;">
    <div class = "card" id = "secondn11" style = "display: flex;">
      <div class = "card-header" id = "firstheadern11" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdn11" aria-expanded = "false" aria-controls = "thirdn11 collapsed " style = "display: inline;">n11</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdn11" style = "display: block;">
        <div id = "chartDivn11" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 68px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              44
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstorkide" style = "display: block;">
    <div class = "card" id = "secondorkide" style = "display: flex;">
      <div class = "card-header" id = "firstheaderorkide" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdorkide" aria-expanded = "false" aria-controls = "thirdorkide collapsed " style = "display: inline;">orkide</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdorkide" style = "display: block;">
        <div id = "chartDivorkide" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 63px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              36
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firsthepsiburada" style = "display: block;">
    <div class = "card" id = "secondhepsiburada" style = "display: flex;">
      <div class = "card-header" id = "firstheaderhepsiburada" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdhepsiburada" aria-expanded = "false" aria-controls = "thirdhepsiburada collapsed " style = "display: inline;">hepsiburada</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdhepsiburada" style = "display: block;">
        <div id = "chartDivhepsiburada" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 59px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              64
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstedirnetb" style = "display: block;">
    <div class = "card" id = "secondedirnetb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderedirnetb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdedirnetb" aria-expanded = "false" aria-controls = "thirdedirnetb collapsed " style = "display: inline;">edirnetb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdedirnetb" style = "display: block;">
        <div id = "chartDivedirnetb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 211px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              2
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstpolatlitb" style = "display: block;">
    <div class = "card" id = "secondpolatlitb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderpolatlitb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdpolatlitb" aria-expanded = "false" aria-controls = "thirdpolatlitb collapsed " style = "display: inline;">polatlitb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdpolatlitb" style = "display: block;">
        <div id = "chartDivpolatlitb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 457px; top: 55px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-11</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              13
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstadanatb" style = "display: block;">
    <div class = "card" id = "secondadanatb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderadanatb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdadanatb" aria-expanded = "false" aria-controls = "thirdadanatb collapsed " style = "display: inline;">adanatb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdadanatb" style = "display: block;">
        <div id = "chartDivadanatb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 161px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              55
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstistanbultb" style = "display: block;">
    <div class = "card" id = "secondistanbultb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderistanbultb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdistanbultb" aria-expanded = "false" aria-controls = "thirdistanbultb collapsed " style = "display: inline;">istanbultb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdistanbultb" style = "display: block;">
        <div id = "chartDivistanbultb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 457px; top: 51px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-11</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              133
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstturib" style = "display: block;">
    <div class = "card" id = "secondturib" style = "display: flex;">
      <div class = "card-header" id = "firstheaderturib" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdturib" aria-expanded = "false" aria-controls = "thirdturib collapsed " style = "display: inline;">turib</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdturib" style = "display: block;">
        <div id = "chartDivturib" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 89px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              106
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Когда я фильтрую раздел, все дочерние элементы display: block превращаются в display: none, поэтому все дочерние элементы становятся невидимыми.

Итак, как я могу удалить стиль display: none из всех дочерних элементов при фильтрации. Надеюсь найти способ. Спасибо за помощь.

Редактировать:

Когда я что-то ищу, я могу просто получить доступ к заголовку, и все дочерние узлы поиска исчезнут. Например, введите в сниппете «konya». Я вижу только заголовок всех дочерних узлов "konya", обращающихся к объекту "hide".

Я пробую это:

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
   var value = $(this).val().toLowerCase();
    $("#chartClass *").filter(function() {    
          $(this).children("*:nth-child(n)").toggle($(this).children("*:nth-child(n)").text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Но только сначала дети обращаются к видимому. Как вы можете видеть в примере, один элемент имеет как минимум 2^n дочерних элементов.

Вы вызываете $(this).toggle(...), что приведет к тому, что эти элементы будут display: none;.

— kmoser 12.12.2020 22:47

Я пытаюсь сделать фильтрацию. Все может быть ничем, кроме моего поиска, и мои поиски все дети, но дети тоже не обращаются.

— Murat Demir 12.12.2020 22:58

Уточните, пожалуйста, какие элементы вы хотите скрыть. Например, вы можете отредактировать свой вопрос, включив в него пример того, как HTML должен выглядеть после ввода пользователя.

— kmoser 13.12.2020 02:39

Я добавляю больше деталей @kmoser

— Murat Demir 13.12.2020 11:50
javascript html
12.12.2020 19:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не уверен, чего именно вы хотите, но я надеюсь, что это даст вам представление о том, как найти собственное решение.

В этом коде; вы можете фильтровать div родительской карты через поле значения;

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
   var value = $(this).val().toLowerCase();
    $("#chartClass .card").filter(function() {
          $(this).toggle(
                $(this).find("h5>a").text().toLowerCase().indexOf(value) > -1
          );
    });
  });
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class = "row">
  <div class = "col-md-12 col-xl-12">
    <div class = "card">
      <div class = "card-block">
        <form class = "form-inline d-flex justify-content-center md-form form-sm">
          <i class = "fas fa-search" aria-hidden = "true"></i>
          <input id = "myInput" class = "form-control form-control-sm ml-3 w-75" type = "text" placeholder = "Search" aria-label = "Search">
        </form>
      </div>
    </div>
  </div>
</div>

<div class = "row" id = "chartClass">

  <div class = "col-xl-6" id = "firstkonyahal">
    <div class = "card" id = "secondkonyahal">
      <div class = "card-header" id = "firstheaderkonyahal">
        <h5><a href = "#!" data-toggle = "collapse" 
               data-target = "#thirdkonyahal" aria-expanded = "false"
               aria-controls = "thirdkonyahal collapsed"
               class = "collapsed">konyahal</a>
        </h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdkonyahal" style = "display: block;">
        <div id = "chartDivkonyahal" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 457px; top: 59px; display: block;">
            <div class = "morris-hover-row-label">2020-12-10</div>
            <div class = "morris-hover-point" style = "color: #0b62a4">
              Value:
              73
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firsteskisehirtb" style = "display: block;">
    <div class = "card" id = "secondeskisehirtb" style = "display: flex;">
      <div class = "card-header" id = "firstheadereskisehirtb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdeskisehirtb" aria-expanded = "false" aria-controls = "thirdeskisehirtb collapsed " style = "display: inline;">eskisehirtb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdeskisehirtb" style = "display: block;">
        <div id = "chartDiveskisehirtb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 0px; top: 84px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-05</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              22
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstkonyatb">
    <div class = "card" id = "secondkonyatb">
      <div class = "card-header" id = "firstheaderkonyatb">
        <h5><a href = "#!" data-toggle = "collapse" data-target = "#thirdkonyatb" aria-expanded = "false" aria-controls = "thirdkonyatb collapsed ">konyatb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdkonyatb" style = "display: block;">
        <div id = "chartDivkonyatb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 49px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              19
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstankaratb" style = "display: block;">
    <div class = "card" id = "secondankaratb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderankaratb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdankaratb" aria-expanded = "false" aria-controls = "thirdankaratb collapsed " style = "display: inline;">ankaratb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdankaratb" style = "display: block;">
        <div id = "chartDivankaratb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 78px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              40
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstadanahal" style = "display: block;">
    <div class = "card" id = "secondadanahal" style = "display: flex;">
      <div class = "card-header" id = "firstheaderadanahal" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdadanahal" aria-expanded = "false" aria-controls = "thirdadanahal collapsed " style = "display: inline;">adanahal</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdadanahal" style = "display: block;">
        <div id = "chartDivadanahal" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 67px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              53
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstgapki" style = "display: block;">
    <div class = "card" id = "secondgapki" style = "display: flex;">
      <div class = "card-header" id = "firstheadergapki" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdgapki" aria-expanded = "false" aria-controls = "thirdgapki collapsed " style = "display: inline;">gapki</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdgapki" style = "display: block;">
        <div id = "chartDivgapki" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 35px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-09</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              1
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstmpob" style = "display: block;">
    <div class = "card" id = "secondmpob" style = "display: flex;">
      <div class = "card-header" id = "firstheadermpob" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdmpob" aria-expanded = "false" aria-controls = "thirdmpob collapsed " style = "display: inline;">mpob</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdmpob" style = "display: block;">
        <div id = "chartDivmpob" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 35px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-10</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              1
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstn11" style = "display: block;">
    <div class = "card" id = "secondn11" style = "display: flex;">
      <div class = "card-header" id = "firstheadern11" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdn11" aria-expanded = "false" aria-controls = "thirdn11 collapsed " style = "display: inline;">n11</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdn11" style = "display: block;">
        <div id = "chartDivn11" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 68px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              44
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstorkide" style = "display: block;">
    <div class = "card" id = "secondorkide" style = "display: flex;">
      <div class = "card-header" id = "firstheaderorkide" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdorkide" aria-expanded = "false" aria-controls = "thirdorkide collapsed " style = "display: inline;">orkide</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdorkide" style = "display: block;">
        <div id = "chartDivorkide" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 63px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              36
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firsthepsiburada" style = "display: block;">
    <div class = "card" id = "secondhepsiburada" style = "display: flex;">
      <div class = "card-header" id = "firstheaderhepsiburada" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdhepsiburada" aria-expanded = "false" aria-controls = "thirdhepsiburada collapsed " style = "display: inline;">hepsiburada</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdhepsiburada" style = "display: block;">
        <div id = "chartDivhepsiburada" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 59px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              64
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstedirnetb" style = "display: block;">
    <div class = "card" id = "secondedirnetb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderedirnetb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdedirnetb" aria-expanded = "false" aria-controls = "thirdedirnetb collapsed " style = "display: inline;">edirnetb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdedirnetb" style = "display: block;">
        <div id = "chartDivedirnetb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 211px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              2
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstpolatlitb" style = "display: block;">
    <div class = "card" id = "secondpolatlitb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderpolatlitb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdpolatlitb" aria-expanded = "false" aria-controls = "thirdpolatlitb collapsed " style = "display: inline;">polatlitb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdpolatlitb" style = "display: block;">
        <div id = "chartDivpolatlitb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 457px; top: 55px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-11</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              13
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstadanatb" style = "display: block;">
    <div class = "card" id = "secondadanatb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderadanatb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdadanatb" aria-expanded = "false" aria-controls = "thirdadanatb collapsed " style = "display: inline;">adanatb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdadanatb" style = "display: block;">
        <div id = "chartDivadanatb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 161px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              55
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstistanbultb" style = "display: block;">
    <div class = "card" id = "secondistanbultb" style = "display: flex;">
      <div class = "card-header" id = "firstheaderistanbultb" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdistanbultb" aria-expanded = "false" aria-controls = "thirdistanbultb collapsed " style = "display: inline;">istanbultb</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdistanbultb" style = "display: block;">
        <div id = "chartDivistanbultb" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 457px; top: 51px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-11</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              133
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class = "col-xl-6" id = "firstturib" style = "display: block;">
    <div class = "card" id = "secondturib" style = "display: flex;">
      <div class = "card-header" id = "firstheaderturib" style = "display: block;">
        <h5 style = "display: inline-block;"><a href = "#!" data-toggle = "collapse" data-target = "#thirdturib" aria-expanded = "false" aria-controls = "thirdturib collapsed " style = "display: inline;">turib</a></h5>
        <div class = "float-right badge badge-success" style = "font-size: 125%; display: block;">Basarili</div>
      </div>
      <div class = "card-body collapse" id = "thirdturib" style = "display: block;">
        <div id = "chartDivturib" style = "position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block;">
          <div class = "morris-hover morris-default-style" style = "left: 456px; top: 89px; display: block;">
            <div class = "morris-hover-row-label" style = "display: block;">2020-12-12</div>
            <div class = "morris-hover-point" style = "color: rgb(11, 98, 164); display: block;">
              Value:
              106
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Например, когда я звоню "konyahal", внутри Konyahal много div'ов. Все эти дочерние элементы исчезают. (Mesela snippet te çalıştır konyahal aradığında onun içindeki «значение», «başarılı», «tarih» kayboluyor sadece yazı kalıyor.)

— Murat Demir 13.12.2020 13:09

Я не мог понять, как именно вы хотите, чтобы это работало. В каких полях вы хотите искать образец значения, введенного в поле поиска? Как вы хотите, чтобы отображались найденные элементы, можете объяснить на примере?

— Serhat MERCAN 13.12.2020 19:51

Я хочу найти <div class = "row" id = "chartClass"> всех дочерних элементов. Когда я ввожу «konya», я хочу видеть «konyahal» и «konyatb» с их дочерними элементами (но в каждом поиске есть 2 ^ n дочерних элементов).

— Murat Demir 13.12.2020 20:36

Я постараюсь и дам вам знать к ночи. Это редактирование имеет больше смысла.

— Murat Demir 14.12.2020 11:00

Это работает хорошо, это слишком ясно, спасибо большое :)

— Murat Demir 15.12.2020 09:08
13.12.2020 12:01

Другие вопросы по теме

TailwindCSS — исправлена ​​полная ширина div родителя flex
Вводимое мной входное значение не отображается в JavaScript
Как установить NumJs для веб-разработки?
Возникли проблемы с использованием обновленной оценки в других функциях за пределами функции, в которой оценка обновляется в HTML Canvas
Могу ли я изменить цвет фона элемента при наведении курсора на другой?
Как получить несколько таблиц с веб-страницы с помощью R
Каков наиболее эффективный способ разбить изображение с помощью холста?
Javascript/Node.js импортирует html-файл и передает параметры в html-файл
Как получить доступ к данным Vue в Vue-CLI в консоли браузера
Значение диапазона внутри значения стиля

Похожие вопросы

Nodejs: оценка не удалась: ReferenceError: переменная не определена
Вводимое мной входное значение не отображается в JavaScript
Как проверить имена файлов из HTTP-запроса в Node.js?
Не удается установить реакцию на код визуальной студии
Как сравнивать объекты/строки с узлом циклической функции js?
Как напечатать словарные слова в выводе для данного слова с помощью javascript
Как получить данные из ответа на запрос fetch javascript
Как упорядочить элементы внутри всплывающего окна QML?
Как я могу изменить значение элемента в массиве на основе нескольких условий?
Как установить NumJs для веб-разработки?