隱藏與輸入欄位中的值不匹配的元素并僅保留具有它的元素-有解無憂

我正在做一個小專案，我在折疊元素中搜索單詞。如果找到，一些折疊的元素將打開以顯示單詞。

我想實作的下一件事是只保留包含它的li并隱藏其他的li。

我不確定如何進一步實作這一目標。我嘗試過的內容完全隱藏了找到的元素，實際上我想保留它。我可能需要一個回圈，但我不知道如何撰寫它。

一切都發生在這里：

function showWordsFound() {
        const word = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
        const r = new RegExp("("   word   ")", "ig");
        $(".reports-list-item__title--compendium").each(function(i) {
            if ($(this).text().match(r)) {
                let matches = $(this).text().match(r);
                console.log(matches);
                console.log(typeof matches);
                $.each(matches, function () {
                    occurrences.push(i);
                });
                // hide element not matching the word found
                // $(this).parent().hide();
                $(this).closest(".timeline-compendium__content").collapse("show");
                $(this).closest(".timeline-type .timeline-type__content").collapse("show");
            }            
        });
    }

有人可以幫我澄清一下嗎？

顯示代碼片段

var i = 0;

$(document).on("click", "#findWord", function(e) {
  let occurrences = [];

  //reset i
  i = 0;

  const x = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
  let error = document.querySelector("#message");

  if (x == "") {
    error.style.display = "block";
    error.style.color = "red";
  } else {
    error.style.display = "none";
    showWordsFound();
  }

  let clickClear = document.querySelector("#clear");

  clickClear.addEventListener("click", clear);

  function clear() {
    // get the search term from the input
    let clickInput = document.querySelector("#searchedWord");
    clickInput.value = "";
    var spans = $(".reports-list-item__title--compendium > mark");
    spans.each(function() {
      spans.contents().unwrap();
    });
    occurrences.splice(0, occurrences.length);
    // reset our labels
    $(".timeline-compendium__content").collapse("hide");
    $(".timeline-type .timeline-type__content").collapse("hide");
  }

  function showWordsFound() {
    // create a regex from our term
    const word = document.getElementById("searchedWord").value;
    const r = new RegExp("("   word   ")", "ig");
    $(".reports-list-item__title--compendium").each(function(i) {
      if ($(this).text().match(r)) {
        // get all the matches
        var matches = $(this).text().match(r);
        $.each(matches, function() {
          // push the index of this section onto the array
          occurrences.push(i);

          // // Trying to hide elements that don't contain Summary
          $(this).closest('li').hide();

          // console.log(occurrences);
        });
        $(this).closest(".timeline-compendium__content").collapse("show");
        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
      }
    });
  }

});

.found {
  background-color: yellow;
}

#labels {
  margin-left: 15px;
  font-size: 16px;
}

.timeline-compendium {
  margin-left: 2rem;
}

.timeline-type__header {
  width: 400px;
  height: 50px;
  background-color: rgb(46, 177, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid white;
}

.timeline-type__header:hover {
  color: white;
  background-color: rgb(35, 119, 70);
}

#tab-content {
  border: 1px solid red;
}

input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input#findWord {
  background-color: rgb(248, 211, 3);
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clear {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 150px;
  line-height: 25px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 50%;
}

#message {
  display: none;
  font-size: 1em;
}

#btnNext {
  margin-left: 0.5rem;
}

mark {
  background-color: yellow !important;
}

.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row stickyBar">
    <div class="col-sm-12 mb-2">
      <div id="searchForm" class="d-flex flex-column">
        <label for="searchedWord">
          <ul>
            <li>Search for 'summary' (done)</li>
            <li>open collapsed items that contain it (done)</li>
            <li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>
          </ul>
        </label>
        <div class="col-sm-12 p-0 d-flex ">
          <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
          <button type="submit" id="findWord" class="btn btn-primary">Search</button>
          <div id="clear" role="button">X</div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 mb-2">
      <div id="labels">
        <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
          <div class="row align-items-center">
            <div class="col-auto">1<sup>st</sup> collapsible item</div>
            <div class="col"><span></span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="introduction">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">1</div>
                      <div class="col timeline-type__title">First nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="foreword">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 2 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
          <div class="row align-items-center">
            <div class="col-auto">2<sup>nd</sup></div>
            <div class="col"><span>collapsible item</span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="titleA">
          <div class="timeline-type">
            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">2</div>
                      <div class="col timeline-type__title">Second nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="summary">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Summary
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 3 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
          <div class="row align-items-center">
            <div class="col-auto">3<sup>rd</sup></div>
            <div class="col"><span>collapsible item</span>
            </div>
            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
          </div>
        </a>

        <div class="timeline-compendium__content collapse" id="titleB">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">3</div>
                      <div class="col timeline-type__title">Third nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB0">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link cool summary
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">4</div>
                      <div class="col timeline-type__title">Fourth nested collapsible
                      </div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB2">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以獲取當前專案并使所有專案先隱藏，然后顯示匹配的串列專案，例如，

var i = 0;

$(document).on("click", "#findWord", function(e) {
  let occurrences = [];

  //reset i
  i = 0;

  const x = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
  let error = document.querySelector("#message");

  if (x == "") {
    error.style.display = "block";
    error.style.color = "red";
  } else {
    error.style.display = "none";
    showWordsFound();
  }

  let clickClear = document.querySelector("#clear");

  clickClear.addEventListener("click", clear);

  function clear() {
    // get the search term from the input
    let clickInput = document.querySelector("#searchedWord");
    clickInput.value = "";
    var spans = $(".reports-list-item__title--compendium > mark");
    spans.each(function() {
      spans.contents().unwrap();
    });
    occurrences.splice(0, occurrences.length);
    // reset our labels
    $(".timeline-compendium__content").collapse("hide");
    $(".timeline-type .timeline-type__content").collapse("hide");
  }

  function showWordsFound() {
    // create a regex from our term
    const word = document.getElementById("searchedWord").value;
    const r = new RegExp("("   word   ")", "ig");
    $(".reports-list-item__title--compendium").each(function(i, el) {
       el.parentNode.parentNode.style.display = "none"
      if ($(this).text().match(r)) {
        // get all the matches
        var matches = $(this).text().match(r);
        $.each(matches, function() {
          // push the index of this section onto the array
          occurrences.push(i);

          // // Trying to hide elements that don't contain Summary
          $(this).closest('li').hide();

          el.parentNode.parentNode.style.display = "list-item"

        });
        $(this).closest(".timeline-compendium__content").collapse("show");
        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
      }
    });
  }

});

.found {
  background-color: yellow;
}

#labels {
  margin-left: 15px;
  font-size: 16px;
}

.timeline-compendium {
  margin-left: 2rem;
}

.timeline-type__header {
  width: 400px;
  height: 50px;
  background-color: rgb(46, 177, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid white;
}

.timeline-type__header:hover {
  color: white;
  background-color: rgb(35, 119, 70);
}

#tab-content {
  border: 1px solid red;
}

input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input#findWord {
  background-color: rgb(248, 211, 3);
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clear {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 150px;
  line-height: 25px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 50%;
}

#message {
  display: none;
  font-size: 1em;
}

#btnNext {
  margin-left: 0.5rem;
}

mark {
  background-color: yellow !important;
}

.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row stickyBar">
    <div class="col-sm-12 mb-2">
      <div id="searchForm" class="d-flex flex-column">
        <label for="searchedWord">
          <ul>
            <li>Search for 'summary' (done)</li>
            <li>open collapsed items that contain it (done)</li>
            <li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>
          </ul>
        </label>
        <div class="col-sm-12 p-0 d-flex ">
          <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
          <button type="submit" id="findWord" class="btn btn-primary">Search</button>
          <div id="clear" role="button">X</div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 mb-2">
      <div id="labels">
        <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
          <div class="row align-items-center">
            <div class="col-auto">1<sup>st</sup> collapsible item</div>
            <div class="col"><span></span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="introduction">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">1</div>
                      <div class="col timeline-type__title">First nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="foreword">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 2 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
          <div class="row align-items-center">
            <div class="col-auto">2<sup>nd</sup></div>
            <div class="col"><span>collapsible item</span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="titleA">
          <div class="timeline-type">
            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">2</div>
                      <div class="col timeline-type__title">Second nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="summary">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Summary
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 3 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
          <div class="row align-items-center">
            <div class="col-auto">3<sup>rd</sup></div>
            <div class="col"><span>collapsible item</span>
            </div>
            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
          </div>
        </a>

        <div class="timeline-compendium__content collapse" id="titleB">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">3</div>
                      <div class="col timeline-type__title">Third nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB0">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link cool summary
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">4</div>
                      <div class="col timeline-type__title">Fourth nested collapsible
                      </div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB2">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

此行將el.parentNode.parentNode選擇相應的<li> ... </li>元素。

uj5u.com熱心網友回復：

試試這個代碼，它可以如你所愿。

剛剛在腳本中的函式 showWordsFound() 中做了一些更改。所有其他代碼保持不變。

<!DOCTYPE html>
<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <style>
        .found {
            background-color: yellow;
        }
        
        #labels {
            margin-left: 15px;
            font-size: 16px;
        }
        
        .timeline-compendium {
            margin-left: 2rem;
        }
        
        .timeline-type__header {
            width: 400px;
            height: 50px;
            background-color: rgb(46, 177, 100);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border: 1px solid white;
        }
        
        .timeline-type__header:hover {
            color: white;
            background-color: rgb(35, 119, 70);
        }
        
        #tab-content {
            border: 1px solid red;
        }
        
        input[type=text] {
            width: 80%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        
        input#findWord {
            background-color: rgb(248, 211, 3);
            border: none;
            color: black;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        
        #clear {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 20px;
            right: 150px;
            line-height: 25px;
            font-size: 14px;
            padding-left: 8px;
            font-weight: bold;
            cursor: pointer;
            color: #fff;
            background-color: red;
            border: none;
            border-radius: 50%;
        }
        
        #message {
            display: none;
            font-size: 1em;
        }
        
        #btnNext {
            margin-left: 0.5rem;
        }
        
        mark {
            background-color: yellow !important;
        }
        
        .stickyBar {
            position: sticky;
            top: 0;
            z-index: 1;
            background-color: white;
        }
    </style>

    <script>
        var i = 0;

        $(document).on("click", "#findWord", function(e) {
            let occurrences = [];

            //reset i
            i = 0;

            const x = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
            let error = document.querySelector("#message");

            if (x == "") {
                error.style.display = "block";
                error.style.color = "red";
            } else {
                error.style.display = "none";
                showWordsFound();
            }

            let clickClear = document.querySelector("#clear");

            clickClear.addEventListener("click", clear);

            function clear() {
                // get the search term from the input
                let clickInput = document.querySelector("#searchedWord");
                clickInput.value = "";
                var spans = $(".reports-list-item__title--compendium > mark");
                spans.each(function() {
                    spans.contents().unwrap();
                });
                occurrences.splice(0, occurrences.length);
                // reset our labels
                $(".timeline-compendium__content").collapse("hide");
                $(".timeline-type .timeline-type__content").collapse("hide");
            }

            function showWordsFound() {
                $('.timeline-compendium').show();
                $('.timeline-compendium__content').show();
                $('.timeline-type__content').show();

                // create a regex from our term
                const word = document.getElementById("searchedWord").value;
                const r = new RegExp("("   word   ")", "ig");
                $(".reports-list-item__title--compendium, .reports-list-item__title--nolink").each(function(i, el) {
                    el.parentNode.parentNode.style.display = "none"
                    if ($(this).text().match(r)) {
                        // get all the matches
                        var matches = $(this).text().match(r);
                        $.each(matches, function() {
                            // push the index of this section onto the array
                            occurrences.push(i);
                            // // Trying to hide elements that don't contain Summary
                            $(this).closest('li').hide();
                            el.parentNode.parentNode.style.display = "list-item"
                        });
                        $(this).closest(".timeline-compendium__content").collapse("show");
                        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
                    }
                });

                var count = 0;
                $(".timeline-type").each(function(i, el) {
                    var this_var = $(this);
                    $(this).show();
                    var visible_length = $(this).find('li:visible').length;
                    var id = $(this).find('.timeline-type__content').attr('id');
                    $(this).closest('.timeline-compendium').show();
                    if (visible_length == 0) {
                        if (id == "chapterB0") {
                            count  ;
                            this_var.hide();
                        } else if (id == "chapterB2") {
                            count  ;
                            this_var.hide();
                            if (count == 2) {
                                $(this).closest('.timeline-compendium').hide();
                            }
                        } else {
                            $(this).closest('.timeline-compendium').hide();
                        }
                    }
                });
            }

        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row stickyBar">
            <div class="col-sm-12 mb-2">
                <div id="searchForm" class="d-flex flex-column">
                    <label for="searchedWord">
                        <ul>
                            <li>Search for 'summary' (done)</li>
                            <li>open collapsed items that contain it (done)</li>
                            <li>hide other elements that don't have the word from input field (ex: No link, some content
                                with link,
                                second cool) </li>
                        </ul>
                    </label>
                    <div class="col-sm-12 p-0 d-flex ">
                        <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
                        <button type="submit" id="findWord" class="btn btn-primary">Search</button>
                        <div id="clear" role="button">X</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 mb-2">
                <div id="labels">
                    <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <section class="timeline-compendium">
                    <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
                        <div class="row align-items-center">
                            <div class="col-auto">1<sup>st</sup> collapsible item</div>
                            <div class="col"><span></span></div>
                            <div class="col-auto">
                                <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
                                <span class="sr-only">Collapse/expand this item</span>
                            </div>
                        </div>
                    </a>
                    <div class="timeline-compendium__content collapse" id="introduction">
                        <div class="timeline-type">
                            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">1</div>
                                                <div class="col timeline-type__title">First nested collapsible</div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="foreword">
                                <ul class="reports-list">
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                First cool
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- section 2 -->
                <section class="timeline-compendium">
                    <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
                        <div class="row align-items-center">
                            <div class="col-auto">2<sup>nd</sup></div>
                            <div class="col"><span>collapsible item</span></div>
                            <div class="col-auto">
                                <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
                                <span class="sr-only">Collapse/expand this item</span>
                            </div>
                        </div>
                    </a>
                    <div class="timeline-compendium__content collapse" id="titleA">
                        <div class="timeline-type">
                            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">2</div>
                                                <div class="col timeline-type__title">Second nested collapsible</div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="summary">
                                <ul class="reports-list">
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Second cool
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Summary
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- section 3 -->
                <section class="timeline-compendium">
                    <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
                        <div class="row align-items-center">
                            <div class="col-auto">3<sup>rd</sup></div>
                            <div class="col"><span>collapsible item</span>
                            </div>
                            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
                        </div>
                    </a>

                    <div class="timeline-compendium__content collapse" id="titleB">
                        <div class="timeline-type">
                            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">3</div>
                                                <div class="col timeline-type__title">Third nested collapsible</div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="chapterB0">
                                <ul class="reports-list">
                                    <li>
                                        <a class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--nolink">
                                                No link</div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Some content with link cool summary
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Some content with link
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="timeline-type">
                            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">4</div>
                                                <div class="col timeline-type__title">Fourth nested collapsible
                                                </div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="chapterB2">
                                <ul class="reports-list">
                                    <li>
                                        <a class="reports-list-item reports-list-item--compendium">
                                            <div class="col reports-list-item__title reports-list-item__title--nolink">
                                                No link</div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Some content with link
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373277.html

標籤：javascript 查询循环

上一篇：資料表渲染（一列中的多個資料）未顯示在界面中

下一篇：電話號碼屏蔽（無插件）