Question

我有一个具有以下HTML结构的程序：

<div class="day-container">
    <h2>Day X</h2>
    <div class="session-container">
        <div class="panel">SESSION TITLE</div>
        <div class="presentation-container">
            <div class="panel">PRESENTATION</div>
        </div>
        <div class="presentation-container">
            <div class="panel">PRESENTATION</div>
        </div>
        <div class="presentation-container">
            <div class="panel">PRESENTATION</div>
        </div>
    </div>
    <div class="session-container">
        <div class="panel">SESSION TITLE</div>
        <div class="presentation-container">
            <div class="panel">PRESENTATION</div>
        </div>
        <div class="presentation-container">
            <div class="panel">PRESENTATION</div>
        </div>
        <div class="presentation-container">
            <div class="panel">PRESENTATION</div>
        </div>
    </div>
</div>

我正在尝试使用jQuery从自由文本搜索框中显示/隐藏内容。我可以在这些结果上成功显示/隐藏特定的.presentation-container，但是当其中没有搜索结果时，我也想隐藏.session-container甚至.day-container，但是不知道该怎么做。

我是否需要使用.is(':visible')？

$('input#search').on('search input', function() {
    var query = $(this).val().toLowerCase();

    if (query) {
        $('div.presentation-container').each(function() {
            var textContent = $(this).text().toLowerCase();
            if (textContent.indexOf(query) === -1) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    } else {
        $('div.panel').show();
    }
});

Example jsFiddle

Answer 1

我已经编辑了代码，以使其遍历每一天，每一天的会话以及每个会话的演示文稿。然后，它会检查所有这些内容是否都被隐藏并隐藏父对象（例如，如果所有演示文稿都被隐藏，则它会隐藏会话，然后检查所有会话是否都被隐藏并隐藏一天等）

$('input#search').on('search input', function() {
    var query = $(this).val().toLowerCase();

    if (query) {
        var dayContainers = $('div.day-container');

        // Iterate through each day, each day's sessions, and each session's presentations.
        dayContainers.each(function() {
           var sessionContainers = $(this).find('div.session-container');

           sessionContainers.each(function() {
               var presentationContainers = $(this).find('div.presentation-container');

               presentationContainers.each(function() {
                   var textContent = $(this).text().toLowerCase();
                   if (textContent.indexOf(query) === -1) {
                       $(this).hide();
                   } else {
                       $(this).show();
                   }
               });

               // Filter any presentations that have been hidden.
               var hiddenPresentations = presentationContainers.filter(':hidden');

               // If all of this session's presentations are hidden, hide the session.
               if (presentationContainers.length === hiddenPresentations.length) {
                   $(this).hide();
               } else {
                   $(this).show();
               }
           });

           // Perform the same check on the session containers.
           var hiddenSessions = sessionContainers.filter(':hidden');

           if (sessionContainers.length === hiddenSessions.length) {
               $(this).hide();
           } else {
               $(this).show();
           }
        });
    } else {
        // Show any previously-hidden days/sessions/presentations.
        $('div.panel, div.day-container, div.session-container, div.presentation-container').show();
    }
});

h2 {
  margin: 0;
}

.session-container {
  padding: 10px;
  margin: 10px 0;
  background: lightgray;
}

.panel {
  font-weight: 700;
}

.presentation-container {
  margin-top: 10px;
  border: solid 1px gray;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input id="search" name="search" type="search" placeholder="Search...">
</p>
<div class="day-container">
  <h2>
    DAY 1
  </h2>
  <div class="session-container">
    <div class="panel">
      Session Title
    </div>
    <div class="presentation-container">
      Presentation One
    </div>
    <div class="presentation-container">
      Presentation Two
    </div>
    <div class="presentation-container">
      Presentation Three
    </div>
  </div>
  <div class="session-container">
    <div class="panel">
      Session Title
    </div>
    <div class="presentation-container">
      Presentation Four
    </div>
    <div class="presentation-container">
      Presentation Five
    </div>
    <div class="presentation-container">
      Presentation Six
    </div>
  </div>
</div>
<div class="day-container">
  <h2>
    DAY 2
  </h2>
  <div class="session-container">
    <div class="panel">
      Session Title
    </div>
    <div class="presentation-container">
      Presentation Seven
    </div>
    <div class="presentation-container">
      Presentation Eight
    </div>
    <div class="presentation-container">
      Presentation Nine
    </div>
  </div>
  <div class="session-container">
    <div class="panel">
      Session Title
    </div>
    <div class="presentation-container">
      Presentation Ten
    </div>
    <div class="presentation-container">
      Presentation Eleven
    </div>
    <div class="presentation-container">
      Presentation Twelve
    </div>
  </div>
</div>

当所有子元素都不可见时隐藏父HTML内容

1 个答案: